CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
Shile
Shile

Reputation: 1063

Hover with stacked images conflict

I have multiple images that are stacked over each other. On each image hover I move the image to the left to show the whole image.
My problem is that I have hover conflicts because there is hover on multiple images, so sometimes multiple hovers are triggered or before the image goes back to its first state another hover triggers and bugs like that.
Can I somehow manage it to run smoothly and not to trigger another hover while the current is working (in my case while the image goes back to its original state)?

My HTML:

<div class="deck-container">
    <ul>
        <li>
            <img class="img-responsive" src="http://placehold.it/100x200" >
        </li>
        <li>
            <img class="img-responsive" src="http://placehold.it/100x200" >
        </li>
        <li>
            <img class="img-responsive" src="http://placehold.it/100x200" >
        </li>
        <li>
            <img class="img-responsive" src="http://placehold.it/100x200" >
        </li>
    </ul>
</div>

Here is my jsfiddle with the whole example.

Upvotes: 0

Views: 86

Answers (1)

reyaner
reyaner

Reputation: 2819

I know it maybe is not the right answer for you, but for me, it didnt make sens, how the card were sliding out, because you loose mouseover when card gose to the left left.

Also you mixed css transitions with jQuery, which causes a bad animation.

So i made an example on how you could do an effect, that might be better. Or you could try to change it the way you like...

Here the Fiddle: http://jsfiddle.net/tmukxs2o/

var $holder = $('div.deck-container');
var $cards = $('div.deck-container li');

$holder.on("mouseleave", resetAll);
$cards.on("mouseenter", function(e){
    var $this = $(this);  
    resetOther($this);
    $this.stop().animate({'margin-right': 78});
});

function resetOther(card){
    $cards.not(card).each(function(){
        var $this = $(this);
        $this.stop().animate({'margin-right': 0});
    });
}
function resetAll(){
    $cards.each(function(){
        var $this = $(this);
        $this.stop().animate({'margin-right': 0});
    });
}

Upvotes: 1

Related Questions