Home > DeveloperSection > Forums > JQuery mouseOver fades in twice only want once
lois waisbrooker
lois waisbrooker

Total Post:70

Points:494
Posted on    December-31-2014 11:13 PM

 .NET JQuery  HTML  CSS 
Ratings:


 1 Reply(s)
 642  View(s)
Rate this:
The version can be shown here. I want the existing text to fade out and the new text to fade in. For some reason this fades in twice weirdly.

$(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/


Alex Leblois
Alex Leblois

Total Post:67

Points:471
Posted on    December-31-2014 11:28 PM

You may try 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.

Don't want to miss updates? Please click the below button!

Follow MindStick