Javascript-форум - Движущийся блок jquery

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Движущийся блок jquery (https://javascript.ru/forum/misc/15219-dvizhushhijjsya-blok-jquery.html)

Движущийся блок jquery

Подскажите пожалуйста, есть движущийся блок. Код вот такого вида:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sidebar ul a").click(function(){
$("#sidebar").animate({opacity: "1", left: "+=240"}, 1200)
});
});
</script>

Вопрос такой, если ставить, return false; то перехода по ссылке не происходит. А мне нужно чтобы происходил, но после полного выполнения скрипта, как это сделать? А то переходит, когда ему вздумается) Заранее большое спасибо за ответ.

Цитата:

Сообщение от http://api.jquery.com/animate/

.animate( properties, [ duration ], [ easing ], [ complete ] )

Вешайте на complete функцию, в которой делайте программный переход.

SkyLight,
Спасибо большое, я первый скрипт пытаюсь сделать. Должно выглядеть, как:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sidebar ul a").click(function(){
$("#sidebar").animate({opacity: "1", left: "+=240"}, 1200, complete)
});
});
</script>

Или как? Скрипт начинает работать как раз при клике на ссылке

Или как вариант, как установить промежуток времени через который срабатывают ссылки?

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sidebar ul a").click(function(){
$("#sidebar").animate({opacity: "1", left: "+=240"}, 1200, function(){
//этот код вполнится когда закончит свою работу функция animate
})
});
});
</script>

Skipp,
Спасибо, но а какой код нужно прописать? Мне не нужна дополнительная функция, нужно чтобы совершился переход по ссылкам #sidebar ul a (это блок с ссылками). Он сейчас происходит, но произвольно не дождавшись выполнения скрипта, хотелось бы чтобы сначала выполнялся скрипт, а потом переход, ну или же поставить задержку на переход по ссылкам.

Заранее спасибо.

Skipp,
Большое спасибо, он не на что не ругается, но все равно переходит до выполнения функции =( Стер время, за которое должно выполниться, теперь все намного быстрее, но зато хоть успевает.

А если попробовать return false поставить ?

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sidebar ul a").click(function(){
$("#sidebar").animate({ opacity: "1", left: "+=240"}, 1200, function(){location.href = this.src;});
*!*return false;*/!*
});
});
</script>

walik,
При таком раскладе все ссылки посылают на /undefined

<html>
<head>
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
*!*var link = this;*/!*
$("#sidebar").animate({ opacity: "1", left: "+=240"}, 1200, function(){location.href = *!*link.href;*/!*});
*!*return false;*/!*
});
});
</script>
</head>
<body>
<a href="http://google.com/">Click</a><br />
<img src="http://javascript.ru/forum/images/smilies/smile.gif" id="sidebar" style="top: 50px;position: absolute;" />
</body>
</html>

как я так спутал...

walik,
Спасибо, все равно не работает) Наверное ссылок не видит... Такую мелочь забыл упомянуть, что блок с ссылками в другом файле, так как делаю это на joomle :-?

может покажешь твой html и js код, посмотреть как сделать что бы работало ?

<?php
/**
 * @copyright	Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
 * @license		GNU/GPL, see LICENSE.php
 * Joomla! is free software. This version may have been modified pursuant
 * to the GNU General Public License, and as distributed it includes or
 * is derivative of works licensed under the GNU General Public License or
 * other free or open source software licenses.
 * See COPYRIGHT.php for copyright notices and details.
 */

defined('_JEXEC') or die('Restricted access');
$document = &JFactory::getDocument();
$logolink = $this->params->get("logolink", $this->baseurl);
$logotarget = $this->params->get("logotarget", "self");
$logotext = $this->params->get("logotext", $mainframe->getCfg('sitename'));
// $_SESSION[imprezzParams] = $this->params->get("pimpFrontpageDisplay");

$url = clone(JURI::getInstance());
?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
	<jdoc:include type="head" />

<script type="text/javascript" src="/templates/main/jquery.js"></script>
<script type="text/javascript">


$(document).ready(function(){
    $("#box a").click(function(){
 var link = this;
		$("#sidebar").animate({opacity: "1", left: "+=230"})
		$(".footer2").animate({opacity: "1", left: "+=230"})
        $(".bgimage").animate({opacity: "0.3"})
    }); 
});

    </script> 
    


	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/main/style.css" type="text/css" />
	<!--[if IE]>
		<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/main/ie.css" type="text/css" />
	<![endif]-->



</head>
<body>



	<div id="breadcrumbs">				
		<jdoc:include type="modules" name="breadcrumbs" />
	</div>
	
	<div class="primarynav">
	
		<jdoc:include type="modules" name="top" style="list" />
		<? if ($this->countModules('syndicate')) { ?>
		<span class="topnav_rss">
			<!-- <a href="http://feeds.feedburner.com/productivedreams" class="topnav_rss">RSS</a> -->
			<jdoc:include type="modules" name="syndicate" />
		</span>
		<? } ?>
    </div>

    
    <div class="bgimage">
		<div id="page">	

			<div id="content"
				class="narrowcolumn <?=(JRequest::getCmd('layout')=='form'||JRequest::getCmd('task')=='edit') ? "editing" : "" ?>">

				<?php if ($this->getBuffer('message')) : ?>
				<div class="error">
					<h2>
						<?php echo JText::_('Message'); ?>
					</h2>
					<jdoc:include type="message" />
				</div>
				<?php endif; ?>
				<jdoc:include type="component" style="xhtml" />
				
			</div>
	
	
		<? if (JRequest::getCmd('layout') != 'form' ) { ?>
			<!-- SIDEBAR -->
			<div id="sidebar">
            <div class="sidebar">
			<h1 class="logo">
				<a class="logo" href="<?=$logolink?>" target="_<?=$logotarget?>"><?=$logotext?></a>
			</h1>
			
			
			
			
			    <div class="searchfield">
			    	<jdoc:include type="modules" name="search" />
			    </div>
		    
		
				<ul>
					<!--
					<li><h2>Author</h2>
						<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
					</li>
					-->
					<jdoc:include type="modules" name="left" style="imprezzDivision"  />
					
				</ul>
			</div>
		</div>
		
		<!-- SIDEBAR -->
		
		
		<div class="sidebar-right"> 
			
			<jdoc:include type="modules" name="right" style="imprezzSidebarRight"  />
			
		
		</div>
	<? } ?>

	</div> <!-- page -->
   <div class="footer">
    <div class="footer2">
</div> 
    
</div> <!-- bgimage -->



 <div id="footer">

	<div class="footerwrap">
	    <div class="copyright">
			<jdoc:include type="modules" name="footer" />
		</div>
	</div>
</div>
</div> 


<jdoc:include type="modules" name="debug" />
		
</body>
</html>

Ох блин, что то сложновато тут понять что то, я с джумлой не работал не разу)

Ошибки какие то выдает браузер ?

walik,
Ага, да я уже смерился, двигается во время загрузки, потом прикрывается, да и ладно. Там просто код генерируется из кучи подключаемых файлов, в нем див прописал, он распознает, а видимо ссылок не видит.