Bug Tracker

Modify

Ticket #10015 (closed bug: duplicate)

Opened 3 years ago

Last modified 2 years ago

.slide*() and .stop()

Reported by: jpec07@… Owned by:
Priority: low Milestone: None
Component: effects Version: 1.6.2
Keywords: Cc: timmywil
Blocking: Blocked by:

Description

 http://jsfiddle.net/Jpec07/2YdE8/ - Don't know how long it will stay up, but here's a demonstration of the bug, and the associated source code.

Okay, so here's the deal. .stop(true,false) stops the animation in progress and clears the queue. For most animations, this works fine. However, in the instance of .slideUp(), .slideDown(), and .slideToggle(), it also has an interesting effect on elements whose heights are defined by the content they contain (a necessity for dynamic content). Running the animation again will not fully-show the element's height, but will instead return it to the height at which it was .stop()'d. This can leave a significant portion of the element's content hidden.

For posterity's sake (in case the jsfiddle link doesn't work, or you can't use it or whatnot), here's some code:

<!DOCTYPE html> <html> <head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> - jsFiddle demo</title> <script type='text/javascript' src=' http://code.jquery.com/jquery-1.6.2.js'></script> <script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script> <style type='text/css'>

div{ padding:.5em; margin:1em; border:1px #000; background:#f00; opacity:0.7; width:150px; color:#cff; text-decoration:none;

} a {

color:inherit; text-decoration:inherit;

}

</style>

<script type='text/javascript'> $(function(){ $(document).ready(function() {

<!-- Yes, this whole thing could be accomplished by .slideToggle(). But the problem persists that way, too! -->

$("#clicker a").click(function() {

if ($("#clickee").hasClass('clicked')) {

$("#clickee").stop(true, false).slideUp("slow", 'easeInOutCubic').removeClass('clicked');

} else {

$("#clickee").stop(true, false).slideDown("slow", 'easeInOutCubic').addClass('clicked');

}

}); $("#clicker2 a").click(function() {

if ($("#clickee2").hasClass('clicked')) {

$("#clickee2").stop(true, false).animate({

height: 'hide'

}, 500, 'easeInOutCubic').removeClass('clicked');

} else {

$("#clickee2").stop(true, false).animate({

height: 'show'

}, 500, 'easeInOutCubic').addClass('clicked');

}

});

});

}); </script>

</head> <body> <div id="clicker"><a href="#">Click me! :D</a></div> <div id="clickee" style="display:none;">This Div's height is defined by its content. There is no other definition for this div's height. Animation should allow it to go all the way down to the end of the world, but that's why I'm posting a bug report.</div><br /> <br /> <br /> <div id="clicker2"><a href="#">Click me more! >8D</a></div> <div id="clickee2" style="display:none;">This is the second Div. Like the first, the text is the only thing that defines its height. The animation, like the first, defines the height, and when interrupted, still causes problems.</div> </body> </html>

Also note that one of the experts in the IRC channel (Brodingo) was able to create a work-around (using .animate() with variables and {queue:false}; I'll post the code he wrote at the end), but it seems like something that could stand to be fixed in an upcoming release of jQuery.

Thanks! -Jpec07

((Brodingo's Workaround Code: $(document).ready(function() {

var toggleHeight = $("#clickee").height(); console.log(toggleHeight); $("#clicker a").toggle(function(){

$("#clickee").animate({height: toggleHeight, paddingTop:".5em", paddingBottom:".5em"},{queue:false});

}, function(){

$("#clickee").animate({height: 0, paddingTop:0, paddingBottom:0},{queue:false});

});

}); ))

Change History

comment:1 Changed 3 years ago by ajpiano

  • Cc timmywil added
  • Component changed from unfiled to effects

I have a feeling this may be a dupe of #8685, but I can't quite tell if the problem you're experiencing here is remedied completely by the current work on the jQuery (edge) branch, which I've tested against here  http://jsfiddle.net/2YdE8/1/ - or if the error is at least partially due to the timing of when you're adding the classes to toggle the slide direction versus when those slide animations are actually complete. I think the goal of #8685 is to remedy these symptoms, however, so I'll kick it to Timmy for a bit more insight.

comment:2 Changed 3 years ago by Jpec07@…

That correlation wouldn't surprise me one bit. I wish I could be more helpful in providing a solution, but I'm just learning jQuery here (never could quite get my head around JavaScript back in the day). As to the class toggling, I made a page that should wait until after the animations are complete to add the class: even stranger results in this one (tested in Chrome's latest release as of this post time, don't have other browsers on this machine):

 http://jsfiddle.net/Jpec07/YmHCw/

By putting the class assignment in the callback, it should only apply that after the animation has run, correct? Putting the class assignment before the stop and the animation doesn't change the results at all:

 http://jsfiddle.net/Jpec07/KVujB/

For now I guess Brodingo's work-around is the code of choice, at least until the problem is resolved, because the jQuery (edge) doesn't seem to remedy the problem (at least on Chrome, but this is for a project that requires functionality on all browsers, and with some studies putting Chrome at a 30% market share...yeah).

comment:3 Changed 3 years ago by dmethvin

To recap: When you stop the animation and don't use gotoEnd it's leaving the explicitly set height on the element. At the moment there isn't any way for subsequent animations to know this was left behind by a stop()ped animation and should be ignored in favor of the auto height. A comment by rpflorence over on #8685 describes one possible solution that sounds like it would work.

comment:4 Changed 3 years ago by timmywil

  • Priority changed from undecided to low
  • Status changed from new to closed
  • Resolution set to duplicate

Sorry I didn't get to this sooner. Yes, this won't be a problem in 1.7 when 8685 has landed so I'll mark this as a dupe. Here are a couple workarounds in the meantime:  http://jsfiddle.net/timmywil/2YdE8/20/

comment:5 Changed 3 years ago by timmywil

Duplicate of #8685.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.