JQuery слайд анимация

Question

JQuery слайд анимация

0

Я работаю над выпадающим баром для проекта, над которым я работаю, и мне тяжело получить анимацию для работы.

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

Ниже мой код jQuery, а также мой jsfidde

Заранее спасибо

$(document).ready(function(){
var $button = $('#sideoutButton');
var $contain = $('#slideoutContain');
var containWidth = $('#slideoutContain').width();

//Hide the box
$contain.hide();

//Hide or show the container on button click
$button.click(function(){
    if ($contain.is(":visible")) {
        $contain.hide();
        $button.css("left", 0);
    }
    else {
        $contain.show(400, buttonMove());
    }
});

function buttonMove(){
    $button.css("left", function(value) {
        return 0 + containWidth;
    });
}
  });

George Reason 28 нояб. 2013, в 01:40

Источник

0

Вы должны использовать .animate() с переходами.
DevlshOne 28 нояб. 2013, в 00:13
0

Я вижу, что вы новичок в SO. Было бы любезно принять тот ответ, который был бы наиболее полезным. В противном случае, оставьте комментарий, чтобы мы знали, как лучше ответить на этот вопрос.
m59 29 нояб. 2013, в 02:50

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Вы должны использовать .animate() с переходами.
Я вижу, что вы новичок в SO. Было бы любезно принять тот ответ, который был бы наиболее полезным. В противном случае, оставьте комментарий, чтобы мы знали, как лучше ответить на этот вопрос.

Jason · Accepted Answer · 2013-11-27T21-40-00.000Z

Если вы знаете, насколько широка она должна быть, вы можете добиться этого с помощью CSS:

#mycontainer {
    width: 0;
    transition: width 400ms ease;
}

#mycontainer.expand {
    width: 400px; //or whatever your width is
}

и просто используйте JS/jQuery для переключения класса на #mycontainer