Databases
StackOverflow2013
Postsdbo
POStop and rollback other jQuery animate objects when mouseenter a new one
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStop and rollback other jQuery animate objects when mouseenter a new one
    text
    copied!<p>I'm working on a jQuery slider with an active class <code>.slider-active</code> when <code>mouseEnter</code> a figure.</p> <p>In this way, I want to animate my <code>.slider-imgcontainer</code> and my figcaption in a cool effet: </p> <p>When the <code>.slideractive</code> change, the previous object have to reduce the width of <code>.slider-imgcontainer</code> to 250px and after the <code>width</code> and <code>padding</code> of the <code>figcaption</code> to 0. When I reduce the <code>width</code> of <code>figcaption</code>, the text was too high, so I just use <code>.hide</code> and <code>.show</code> to correct this.</p> <p>Then the slider begin to work, but... when the mouse roll over mutliple figure, all of them is animated. I've tried to correct this but I cannot find any solutions (with <code>.clearQueue()</code> et <code>.stop()</code>).</p> <p>Result: <a href="http://hugo.gresse.io/old_2014/" rel="nofollow" title="Final website">current slider</a></p> <p>Main animation code: </p> <pre><code>$(document).ready(function(){ var GLOBAL = { window:$(window), slider:$('.slider-work'), container:$('#container'), figure:$("figure") } /********* SLIDER MAIN *************/ // INIT LARGEUR --- GLOBAL.slider.width($(".slider-work img").size() * 250 + 900); // save width of figcaption in attr to animate them after (no auto animate) GLOBAL.slider.find("figcaption").each(function(i) { var t = $(this); if(!t.parent().hasClass("slider-active")) t.hide(); t.attr("largeur", t.width()); }); // hover GLOBAL.slider.children("figure").mouseenter( function () { var oldActive = $(".slider-active"); var thiss = $(this); oldActive.removeClass("slider-active"); thiss.addClass("slider-active"); oldActive.find("figcaption").animate({ width: 0, padding: 0 }, 220, 'linear', function() { oldActive.find(".slider-imgcontainer").animate({ width : 250 }, 400, 'linear', function() { // Animation de l'ancien active fini , alors : //$(".slider-imgcontainer").removeAttr("style"); thiss.removeAttr("style").children(".slider-imgcontainer").animate({ width : 400 }, 400, 'linear', function(){ var largeurFigcaption = thiss.find("figcaption").show().attr("largeur"); thiss.find("figcaption").animate({ width : largeurFigcaption, padding : " 0 20px 20px 20px" }, 220, 'linear', function(){ }); }); }); }); }); // END MouseEnter //End ready }); </code></pre> <p>And my code for debugging the slider</p> <pre><code> GLOBAL.slider.children("figure").mouseout( function () { var thiss = $(this); //$("#title span").append(" toto"); var myChildrenBehave = GLOBAL.slider.filter(function() { var filtered = $(this).children().is(":animated"); return filtered; }); myChildrenBehave.clearQueue().stop(); }); </code></pre> <p>I accept all idee :)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload