Javascript / jQuery: создание слайдера «Powered By» для логотипа нижнего колонтитула на веб-сайтах

Question

Javascript / jQuery: создание слайдера «Powered By» для логотипа нижнего колонтитула на веб-сайтах

0

Я нашел jsfiddle, который сделал что-то похожее на то, что я хотел сделать. Модифицированная версия находится здесь: http://jsfiddle.net/7m7uK/479/, и она работает на jsfiddle. Я скопировал код на свой сайт, изменил идентификатор, и теперь он не работает. Ниже приведен код, расположенный на моем веб-сайте. Я использую jQuery 1.9.1 и jQuery UI 1.10.3 на своем сайте. Любые предложения относительно того, почему это не работает?

Javascript

<script type="text/javascript">
$( document ).ready(function() {
    $('#footer_logo').hover(function(){
        if ($('#powered_by').is(':hidden')) {
            $('#powered_by').show('slide',{direction:'right'},1000);
       } else {
            $('#powered_by').hide('slide',{direction:'right'},1000);
       }
    });
});
</script>

HTML

  <img src="img.png" width="63" height="25" id="footer_logo"/>
  <div id="powered_by" width="100px"/>Powered By: </div>

CSS

#footer_logo {
    color: #000;
    cursor:pointer;
    display:block;
    position: absolute;
    bottom: 0; right: 0;
    z-index: 100;
}

#powered_by {
    width: 200px;
    height: 20px;
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    background: #ff0000;
    z-index: 99;
}

kdjernigan 04 дек. 2013, в 03:34

Источник

Теги:

javascript

jquery

jquery-ui

1 ответ

Ещё вопросы

Mark S · Accepted Answer · 2013-12-04T01-23-00.000Z

Я пробовал свой код на jsfiddle и хорошо работал. Если проблема все еще сохраняется, проверьте это сообщение SO: JQuery UI show/slide работает неправильно, возможно, их решение может помочь.

Вы хотите показать #powered_by когда вы наведите указатель мыши, а затем спрячьте его, когда вы наведите курсор, не так ли?

Я просмотрел ваш код, и это не так, как вы хотите, чтобы он себя вел. Например, если вы наводите указатель мыши, элемент скользит, но когда вы наведите указатель мыши, затем снова наведите указатель мыши, не позволяя ему скрыться, выполнение зависания будет отменено.

Это будет более эффективно, если вы сделаете это так:

$(document).ready(function() {
$('#footer_logo').hover(function(){
    //hover-in 
    $('#powered_by').show('slide',{direction:'right'},1000);
},function(){
    //hover-out 
    $('#powered_by').hide('slide',{direction:'right'},1000);
});
});

См. Этот jsfiddle.

Или с чистым jQuery: jsfiddle

Я включил свой jquery и jquery UI с неверным URL-адресом. Но мне нравится ваше решение, и я ценю ваш вклад. Отлично работает!
Обнаружил, что версия JavaScript делает что-то странное. Если я перемещаюсь по разделу несколько раз, он в основном подсчитывает, сколько раз мышь проходит по разделу и входит и выходит столько раз. Как я могу это исправить? Я не хочу этого делать? Мне нравится, как работает jquery; однако, не могу установить {overflow-x: hidden;} из-за того, как я использую это.
Вам нужно поставить stop () перед animate: $(selector).stop().animate() . Я вижу, если есть конфликт, устанавливая overflow-x:hidden; на теле. Затем вы можете переключиться на анимацию width работает так же. Вот смотри этот jsfiddle
jsfiddle.net/FVa69/3 - работал на jsfiddle, поэтому я проверил его на своем сайте, и он не работает. Я вставляю свой код ниже для скрипта, похоже, он прав? (Я добавил контейнер вокруг всей вещи, поэтому, если мышь перемещалась по приведенному в действие тексту, он бы не появлялся) <script type="text/javascript"> $(document).ready(function() { var $pBy = $('#powered_by'), w = $pBy.width(); $pBy.width(0) $('#footer_logo_container').hover(function(){ $pBy.stop(true).animate({width: w},'slow'); },function(){ $pBy.stop(true).animate({width: 0},'slow'); }); }); </script>
какие-либо идеи относительно того, почему это не работает?