CODEWITHSUNDEEP
jqueryhtmlslidetoggle
user2461031
user2461031

Reputation: 513

Keep the animation running

When the mouse is over a span .test it slideToggle a div .frame. Inside .frame I have some div .test2, when I click on .test2 it changes the html of .test but it also stops the main animation. How can I keep the animation? My code is:

$('.test').hover(function() {
    var el = $(this);
    var elWidth = el.width();
    $(el).append('<div class="frame"></div>');
    var frame = $('.frame:last');
    var posTop = el.offset().top;
    var posLeft = el.offset().left;
    frame.hide().css({
        'left': posLeft,
        'top': posTop,
        'width':200
    });
    frame.html('<div class="test2">test2</div><div class="test2">test2</div><div class="test2">test2</div>').slideToggle(150);
},function() {
    var frame = $('.frame:last');
    frame.stop().slideToggle(150, function() {
        frame.remove();
    });
});

$(document).on('click', '.test2', function() {
    $('.test').html('bbbbbbbbbbbbbbb');
});

here a jsFiddle: http://jsfiddle.net/malamine_kebe/2PPwD/

if you go to the jsfiddle you'll see that if you click on "test2" it will cloes the div .frame, how can I let .frame open?

Upvotes: 1

Views: 98

Answers (3)

George
George

Reputation: 36794

You are replacing everything in .test, the frame too. You can utilize the detach() method, which removes an element but stores it in a variable for later use:

$(document).on('click', '.test2', function() {
    var frame = $('.frame:last').detach();
    $('.test').html('bbbbbbbbbbbbbbb').append(frame); 
});

Note that toggle() was deprecated in jQuery 1.8 (Your fiddle shows you using 2.0). You could use mouseenter().mouseleave() instead.

JSFiddle

Upvotes: 0

km6zla
km6zla

Reputation: 4897

Use this for your onclick event instead. @Javalsu is right about the problem. This is the solution.

$(document).on('click', '.test2', function() {
    $('.test').contents()[0].data='bbbbbbbbbbbbbbb';
});

http://jsfiddle.net/vCDSP/1/

Upvotes: 1

Smeegs
Smeegs

Reputation: 9224

Why are you nesting the frame inside of the span?

What's happening is on hover, you're creating the frame, then animating it.

Then on click, you are destroying the frame.

If you're lucky and the mouse is still over the initial span, then it triggers the hover event again and redraws the frame and animates it again.

You need to place the frame outside of the span so you don't keep destroying it.

Upvotes: 1

Related Questions