CODEWITHSUNDEEP
jqueryhtmlcss
databot
databot

Reputation: 131

JQuery mouseOver fades in twice only want once

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/

Upvotes: 1

Views: 58

Answers (3)

The Alpha
The Alpha

Reputation: 146191

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.

Upvotes: 2

getbuckts
getbuckts

Reputation: 386

The animate function has a call back on complete. Try that:

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

Upvotes: 1

Carsten Hoffmann
Carsten Hoffmann

Reputation: 941

The problem in your solution is about asynchronity. You kick off the animation. This call returns immediately and continues with setting the new text. You could use a callback method to overcome this issue like so:

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

Upvotes: 1

Related Questions