jQuery-将元素滑动到左侧并更改其样式 [英] jQuery - Slide an element to the left and change its style

问题描述

在这里，我有一个简单的div，其中包含图像和文本.另外，我有一个链接.remove，我想对其进行动画处理以使其向左滑动并更改其背景，文本等.

Here I have a simple div with images and text in it. Also I have a link .remove and I want to animate it to slide to the left and change it's background, text and so on.

到目前为止，我已经做到了.但是有一个小错误(当您快速将鼠标悬停几次时，请检查该错误).

So far I've done this. But there's a little bug (check it when you hover fast several times it).

$(document).ready(function () {
    $('.remove').hover(function () {
        $(this).animate({
            width: '85px'
        });
    },

    function () {
        $(this).animate({
            width: '11px'
        })
    });
});

这是一个演示- http://jsfiddle.net/9jQtt/

这就是我要实现的目标:

And this is what I want to achieve:

推荐答案

问题是，如果您快速将鼠标移入和移出，动画就会堆积起来.您需要通过调用.stop()来取消上一个动画:

The problem is if you hover in and out quickly, the animations just stack up. You need to cancel the previous animation by calling .stop():

$(document).ready(function(){
    $('.remove').hover(function(e){
        $(this).stop().animate({width: '85px'});
    },
    function(e){
        $(this).stop().animate({width: '11px'})
    });
});

示例: http://jsfiddle.net/9jQtt/1/

这篇关于jQuery-将元素滑动到左侧并更改其样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！