Условно остановить анимацию jQuery при чередовании второй функции - PullRequest
Новая
       19

Условно остановить анимацию jQuery при чередовании второй функции

0 голосов
/ 02 декабря 2011

Я запускаю 2 типа анимаций, которые совпадают друг с другом.

  1. При нажатии появляется боковая панель.
  2. Это наведение, которое отображает твит, а также боковую панель (см. jsFiddle )

Моя проблема в том, что когда боковая панель открыта, и моя анимация твиттера запускается, когда я парю над областью твитов, она закрывает боковую панель, чего я не хочу.

Если я пробовал многочисленные операторы if и else, это мой сценарий, но я не могу заставить их работать так, как они мне тоже нужны. Кто-нибудь может помочь?

Мой скрипт ниже, но посмотрите это jsFiddle , чтобы увидеть живое демо - http://jsfiddle.net/motocomdigital/c8Mey/15/

// The variables

var $sideBar = $("#sidebar"),
    $openClose = $("#menu"),
    $tweet  = $("#latest-tweet");


// The twitter script load via JSON

$("#tweet").tweet({
    count: 1,
    username: ["motocomdigital"],
    loading_text: "searching twitter...",
    intro_text: null,
    outro_text: null
}).bind("loaded", function(){

    // Binded function and variable because I need the tweet's dynamic height

    // Tweet height, once tweet has loaded

    var tweetHeight = $("#tweet").innerHeight();

    // Tweet (red block) .hover action

    $tweet.hover(function() {

        // Opens tweet (red block) horizonally and vertically
        $tweet.stop().animate({ top: "-" + tweetHeight + "px", right: "0" }, 300);

        // Opens sidebar horizonally
        $sideBar.stop().animate({ right: "0" }, 300);

    }, function() {

        // Closes tweet (red block) horizonally and vertically
        $tweet.stop().animate({ top: "0", right: "-250px" }, 300);

        // Closes sidebar horizonally
        $sideBar.stop().animate({ right: "-250px" }, 300);

    });

});


// The side bar and tweet animation sequence when "open menu" is clicked.

$openClose.on('click', function () {
    if ($openClose.html() == 'Close Menu') { // run if button says "Close Menu"

        // Closes sidebar horizonally
        $sideBar.stop().animate({ right: "-250px" }, 300);

        // Closes tweet horizontally
        $tweet.stop().animate({ right: "-250px" }, 300);

        // Changes the button text to open
        $openClose.html('Open Menu ');

    } else { // run if button says "Open Menu"

        // Opens sidebar horizonally
        $sideBar.stop().animate({ right: "0" }, 300);

        // Opens tweet horizontal
        $tweet.stop().animate({ right: "0" }, 300);

        // Changes the button text to close
        $openClose.html('Close Menu');

    }
});

Если вам интересно, почему я связываю анимацию слайда вверх в Твиттере, то это потому, что мне нужно, чтобы она выдвигала идеальную высоту твита, а высота твита динамическая и может иметь различную высоту.

Любая помощь, чтобы решить эту проблему, была бы так же хороша, как моя лапша пекла: /

http://jsfiddle.net/motocomdigital/c8Mey/15/

Ответы [ 2 ]

1 голос
/ 02 декабря 2011

Проверьте эту скрипку: отредактировано: http://jsfiddle.net/c8Mey/18/

Я думаю, что это решит вашу проблему, я добавил оператор if, чтобы дать определенную анимацию разделу твитов при открытии вкладки

0 голосов
/ 02 декабря 2011

Вам нужно сделать что-то вроде этого: 

$tweetSlide.hover(function() {

        $tweetSlide.stop().animate({ top: "-" + tweetHeight + "px", right: "0" }, 300);
        $sideBar.stop().animate({ right: "0" }, 300);

    }, function() {

        $tweetSlide.stop().animate({ top: "0", right: "-250px" }, 300);

        if ($showSidebar.html() == 'Open Menu') $sideBar.stop().animate({ right: "-250px" }, 300);

    });

Вам просто нужно условие if ($showSidebar.html() == 'Open Menu').

Однако мне просто нужно знать, нужен ли вам этот эффект. Я думаю, что это все еще нужно немного исправить.

UPDATE Я скучаю по чему-то

Изменить $showSidebar.html('Open Menu '); Для $showSidebar.html('Open Menu');

Удалите последний пробел, иначе условие не будет работать

...