Прыжки в анимации ширины jQuery - PullRequest
Новая
       33

Прыжки в анимации ширины jQuery

5 голосов
/ 17 июля 2011

Мне трудно понять, почему моя анимация прыгает. Есть идеи?

http://jsfiddle.net/9F5DK/5/

jQuery(document).ready(function() {

// Animate the single page nav
    jQuery("a#post-nav-next").hover(

          function(){ 

            jQuery("a#post-nav-next span").stop(true, true).animate({width: "toggle", opacity: "toggle"});

        }
    );
});

Ответы [ 3 ]

3 голосов
/ 17 июля 2011

Хорошо, я потратил некоторое время на выяснение этого.Обычно я не люблю так сильно изменять исходный HTML-код javascript / jquery, и если это не сработает, то я приношу свои извинения.Вот JSFiddle, который делает то, что вы хотите, я думаю ...

http://jsfiddle.net/LqHwk/1/

Одна приятная вещь в этой настройке, вы можете добавить столько 

<div class="post-nav-next">

как вы хотите внутри оболочки, и все они будут работать одинаково

Кстати, я настоятельно рекомендую использовать плагин jquery hoverIntent .

2 голосов
/ 17 июля 2011

Проблемы, которые я вижу:

Установка высоты или ширины встроенного тега <a> или <span> в вашем CSS или в вашей анимации. Прочтите эту статью , чтобы узнать о проблемах с попыткой установить высоту или ширину встроенных тегов Это относится как к вашему CSS, так и к вашей анимации. Если вы хотите анимировать ширину, я думаю, вам нужно сделать это на элементе блока.

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

Например, без повторного преобразования HTML в блочные элементы (что, я думаю, необходимо для надежной анимации ширины), здесь показана плавная анимация только с непрозрачностью. Я установил начальную точку в CSS на желаемую начальную непрозрачность, и я перестал использовать переключатель, чтобы установить анимацию, и я устанавливаю ее явно. Я не уверен, что это требуется, но это убирает неоднозначность из того, что переключатель попытается угадать, что вы хотите: http://jsfiddle.net/jfriend00/r2cdn/ (анимация непрозрачности только в этом jsfiddle, обе анимации включены в jsfiddle ниже). 

jQuery(document).ready(function() {

// Animate the single page nav
    jQuery("a#post-nav-next").hover(function(){ 
            jQuery("a#post-nav-next span").stop(true, true).animate({opacity: "1.0"});
        }, function() {
            jQuery("a#post-nav-next span").stop(true, true).animate({opacity: "0"});
        }
    );
});

Для переключения ширины, с какими двумя состояниями вы надеялись переключиться? Это было непонятно мне как человеку и, вероятно, не понятно и jQuery.toggle (). Если то, что вы пытаетесь сделать, это анимировать правильный отступ, то, возможно, вам следует просто сделать это напрямую.

Если я добавлю прямую анимацию для отступа и изменим начальное значение в CSS, оно начнет плавно анимироваться. Я не уверен на 100%, что знаю, какую анимацию вы искали, но это должно быть направление, в котором вы можете двигаться: http://jsfiddle.net/jfriend00/PE4qQ/.

jQuery(document).ready(function() {

// Animate the single page nav
    jQuery("a#post-nav-next").hover(function(){ 
        jQuery("a#post-nav-next span").stop(true, true).animate({"opacity": "1.0", "padding-right": "100px"});
        }, function() {
            jQuery("a#post-nav-next span").stop(true, true).animate({"opacity": "0", "padding-right": "0px"});
        }
    );
});
0 голосов
/ 19 июля 2011

Через некоторое время я вернулся, чтобы еще раз попробовать эту анимацию.Окончательный эффект можно увидеть здесь:

http://jsfiddle.net/Niels/zrru5/1/

Обратите внимание на следующие важные вещи:

  1. Правила overflow:hidden скрывают текст, так как онКонтейнер анимирован.
  2. white-space: nowrap; на span предотвращает перекомпоновку текста.
  3. * * * * * * * * * * * * * * div остается в своем состоянии по умолчанию при загрузке, а ширина сохраняется.Затем эту ширину повторно применяют в анимации при наведении.

Кто-то лучше в этом, чем я, сделает JS более кратким, но у вас это есть.Хороший эффект для пост-навигации.

...