jQuery按钮动画序列

Question

我的动画按钮有一个简单的问题。我无法弄明白，因为我是jQuery的初学者（记住这一点）。

请访问www.lionwebmedia.com并导航到每个项目下的按钮，现在将其悬停。您应该注意到动画不太正确。按钮宽度正在扩大，但文本更改（没有延迟），我们会从底部扩展按钮高度进入字母的丑陋效果。

This screen将帮助您了解我的意思以及我想如何解决这个问题。

这是我的代码的jsfiddle

我将不胜感激任何帮助。 谢谢！

Answer 1

您可以尝试以下代码

$('.projectContact').mouseover(

function() {
    $('.projectContact').animate({'width': '95px'}, 250, function () { $(this).text('Request a quote') });

});


$('.projectContact').mouseleave(function() {
    $(this).html('');
    $('.projectContact').animate({'width': '16px'}, 250, function () {
    $(this).html('<img src="images/mail.png">')  } );
});

Answer 2

首先

我会推荐你​​JQuery Animate documentation 更具体地说，看看他们如何制作动画队列。

$('#clickme').click(function() {
  $('#book').animate({
    width: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
});

动画完成后，您想要添加文字。

---

的解决方案

Here is a JSFiddle of a working solution

$('.projectContact').mouseenter(function() {
        $(this).animate({
            width: "95px"
        }, 250, function(){
               $(this).text('Request a quote')
        });
}).mouseleave(function(){
    $(this).animate({
        width: "16px"
    }, 250, function(){
        $(this).html("<img src=\"images/mail.png\">");
    });
});

我使用mouseenter和mouseleave因为它们不仅更可靠，而且更易于阅读。如您所见，.animate中的最后一个函数参数（动画完成）是您希望更改发生的位置。

此外，您可以将其添加到元素的样式属性中，您基本上强制文本保持在一行，并隐藏超出边界的所有内容。这样，当您设置动画时，文本不会影响容器 CSS：

.myButton{
    white-space: nowrap;
    overflow: hidden;
}

你还可以做的是创建一个包含CSS的类，然后在每个动画的开头/结尾添加/删除，如果你不希望CSS干扰你的其他CSS。 / p>

---

最终解决方案

好吧，here is the final solution，有着淡淡的一切。它并不完整，但你得到了它。

var current_element = "img";

$('.projectContact').mouseenter(function() {
        var par = $(this);
        $('.projectContact '+current_element).animate({
            opacity: 0
        }, 250, function(){
            par.animate({
                width: "95px"
            }, 250, function(){
                par.html('<div>Request a quote</div>');
                current_element = "div";
            });
        });
        inside = true;
}).mouseleave(function(){
    var par = $(this);
        $('.projectContact '+current_element).animate({
            opacity: 0
        }, 250, function(){
            par.animate({
                width: "16px"
            }, 250, function(){
                par.html('<img src="http://www.hager.se/icons/icon_mail.gif">');
                current_element = "img";
            });
        });
});

你可以搞乱动画时间，但基本上你是这样做的。我必须在“请求引用”文本中添加“div”，以便能够单独为其设置动画。这样，您也可以使用它的不透明度。

祝你好运！

---

替代解决方案

Here's a different approach，您可以在其中编辑元素的文本/图像。这是您目前使用的方法。请注意，这需要CSS white-space: nowrap;才能使动画“丑陋”。

$('.projectContact').mouseenter(function() {
        $(this).animate({
            width: "95px"
        }, 250).text('Request a quote');
}).mouseleave(function(){
    $(this).animate({
        width: "16px"
    }, 250).html("<img src=\"images/mail.png\">");
});

---

完成想法

使用.clearQueue是一种好习惯，这样您的动画就不会开始堆积。它会重置动画队列并停止动画，因此，在这种情况下，如果用户快速进出，动画将直接进入mouseleave动画。 当用户例如在第一个动画序列完成之前两次或多次悬停进出元素时，这也特别有用，它可以防止动画堆积。

See it in use

$('.projectContact').mouseenter(function() {
        $(this).animate({
            width: "95px"
        }, 250).text('Request a quote').clearQueue();
}).mouseleave(function(){
    $(this).animate({
        width: "16px"
    }, 250).html("<img src=\"images/mail.png\">").clearQueue();
});

或者您可以使用.stop，它执行相同的操作，但仅适用于当前动画，而不是整个动画队列。