PDA

View Full Version : code to stop the animation buildup in JS



Ange007
05-08-2011, 03:18 PM
Hi I am using the jQuery Drop Line Tabs - have looked at different codes .stop true true etc. But everything I tried does not solve the problem. Looked at Brandon Aaron's solution and other ones,but still not working..

Please help:
Where, what how do I do to Implement a .stop() to the js code already in place see below:

Many thanks for any help.


var droplinemenu={

arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
if (!this.istopheader)
$subul.css({left:0, top:this._dimensions.h})
var $innerheader=$curobj.children('a').eq(0)
$innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
$innerheader.append(
'<img src="'+ droplinemenu.arrowimage.src
+'" class="' + droplinemenu.arrowimage.classname
+ '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
if ($targetul.queue().length<=1) //if 1 or less queued animations
if (this.istopheader)
$targetul.css({left: $mainmenu.position().left, top: $mainmenu.position().top+this._dimensions.h})
if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
$mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
$targetul.slideDown(droplinemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(droplinemenu.animateduration.out)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
}) //end document.ready
}
}

ddadmin
05-09-2011, 08:55 AM
Not what quite what the behavior you're aiming to accomplish is, but as far as eliminating animation buildup, you might try using the dequeue() function just before the animation is about to start, so in these two places inside the script:


$targetul.dequeue().slideDown(droplinemenu.animateduration.over)

and


$targetul.dequeue().slideUp(droplinemenu.animateduration.out)

Ange007
05-09-2011, 07:30 PM
Hey million thanks, seems to work

Before the sub-menu would appear and disappear rapidly many times before remaining in place long enough to click on any links. I had tried the dequeue method but got it wrong, really appreciate your response.

ddadmin
05-09-2011, 11:52 PM
You're welcome. This looks like a nice change to the script, so I've added it to the official build as well.