Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/java/369.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
JQuery鼠标悬停两次,只需一次_Jquery_Html_Css - Fatal编程技术网

JQuery鼠标悬停两次,只需一次

JQuery鼠标悬停两次,只需一次,jquery,html,css,Jquery,Html,Css,版本可以在这里显示。我希望现有文本淡出,新文本淡入。出于某种原因,这会奇怪地消失两次 $(window).load(function(){ var originalTitle = $('.Pinctitle').text(); $('body').on('mouseenter', '.Pselectorbutton', function(){ var text = $(this).data('title'); $('.Pinctitle').text(text); }); $(

版本可以在这里显示。我希望现有文本淡出,新文本淡入。出于某种原因,这会奇怪地消失两次

$(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);
});
});
你可以尝试:

你可以尝试:


解决方案中的问题与异步有关。您将启动动画。此调用立即返回并继续设置新文本。您可以使用回调方法解决此问题,如下所示:

$('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'); 
    });
});

解决方案中的问题与异步有关。您将启动动画。此调用立即返回并继续设置新文本。您可以使用回调方法解决此问题,如下所示:

$('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'); 
    });
});

animate函数在complete上有一个回调。试试看:

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);
});

animate函数在complete上有一个回调。试试看:

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);
});

你以54秒的优势击败了我;-在回调中启动第二个动画有什么缺点吗?这很完美。对于我认为如此简单的事情来说,这似乎是一项相当艰巨的工作。非常感谢。你以54秒的优势击败了我;-在回调中启动第二个动画有什么缺点吗?这很完美。对于我认为如此简单的事情来说,这似乎是一项相当艰巨的工作。非常感谢。为解释干杯不客气。在使用JavaScript时,回调通常很方便,所以最好习惯它们-为解释干杯不客气。在使用JavaScript时,回调通常很方便,所以最好习惯它们-