Question

版本可以在这里显示。我希望现有文本淡出，新文本淡入。出于某种原因，这会逐渐消失。

$(window).load(function(){
var originalTitle = $('.Pinctitle').text();

$('body').on('mouseenter', '.Pselectorbutton', function(){
    var text = $(this).data('title');
    $('.Pinctitle').text(text);
});
$('body').on('mouseleave', '.Pselectorbutton', function(){
    $('.Pinctitle').text(originalTitle);
});
});

http://jsfiddle.net/ejnxyhke/

Answer 1

您可以尝试this：

$('body').on('mouseenter', '.Pselectorbutton', function(){
    var text = $(this).data('title');
    $('.Pinctitle').stop(1,1).animate({opacity: 0}, 'slow', function() {
        $(this).text(text);
    }).animate({opacity: 1}, 'slow');
});

Also another One.

Answer 2

您的解决方案中的问题是异步性。你开始动画了。此调用立即返回，并继续设置新文本。您可以使用回调方法来解决此问题，如下所示：

$('body').on('mouseenter', '.Pselectorbutton', function(){
    var text = $(this).data('title');
    $('.Pinctitle').text(originalTitle).animate({opacity: 0}, 'slow', function() {
         $('.Pinctitle').text(text).animate({opacity: 1}, 'slow'); 
    });
});

Answer 3

animate功能完成后回调。试试这个：

var originalTitle = $('.Pinctitle').text();

$('body').on('mouseenter', '.Pselectorbutton', function(){
    var text = $(this).data('title');
    var pinc = $('.Pinctitle');
    pinc.text(originalTitle).animate({opacity: 0}, 'slow', pinc.text(text).animate({opacity: 1}, 'slow'));
});
$('body').on('mouseleave', '.Pselectorbutton', function(){
    $('.Pinctitle').text(originalTitle);
});

JQuery mouseOver淡化两次只想要一次

3 个答案: