JQuery Карусель с эффектами парения

Question

Вот URL: http://174.120.239.48/~peakperf/

Вот jQuery:

http://pastebin.com/fB16ahcZ

Сайт все еще находится в стадии разработки.

Если выНаведите курсор на «Служба хранения» на карусели и вы увидите, как должна работать эта функция.при наведении элемент span исчезает, при наведении мыши он скрывается.Некоторые застряли, некоторые работают нормально.Также обратите внимание, что когда вы нажимаете стрелку вправо и прокручиваете карусель, пролеты застревают «на».

Буду признателен за любую помощь, спасибо!

Answer 1

У вас есть несколько тегов с одинаковым идентификатором, что недопустимо. Идентификатор "homeslide6-show". Вам также следует попробовать остановить анимацию перед запуском и упростить свой JavaScript до:

jQuery(document).ready(function() {

    // hides the slickbox as soon as the DOM is ready
    jQuery('#homeslide1, #homeslide2, #homeslide3, #homeslide4, #homeslide5, #homeslide6').hide();

    // shows the slickbox on clicking the noted link  
    for (var i = 1; i <= 6; i++) {
        jQuery('#homeslide' + i + '-show').parent().hover(
            function(e, i) {
                jQuery('#homeslide' + i).stop(true, true).fadeIn('slow');
                e.preventDefault();
                return false;
            },
            function(e, i){
                jQuery('#homeslide' + i).stop(true, true).fadeOut('slow');
                e.preventDefault();
                return false;
            }
        );
    }
});

и дайте мне знать, если это работает.

EDITED

Мой JavaScript выше неверен. Следующие работы:

jQuery(document).ready(function() {

    // hides the slickbox as soon as the DOM is ready
    jQuery('#homeslide1, #homeslide2, #homeslide3, #homeslide4, #homeslide5, #homeslide6').hide();

    // shows the slickbox on clicking the noted link  
    for (var i = 1; i <= 6; i++) {
        jQuery('#homeslide' + i + '-show').parent().data({element: '#homeslide' + i}).hover(
            function() {
                var element = jQuery('element');
                jQuery(element).stop(true, true).fadeIn('slow');
                return false;
            },
            function(){
                var element = jQuery('element');
                jQuery(element).stop(true, true).fadeOut('slow');
                return false;
            }
        );
    }
});

Answer 2

Ваша разметка недействительна, так как отсутствует закрывающий тег "a" (см. Ниже)

</a>

Вот ошибка в вашем коде.

           <a href="#" id="homeslide6-show">
               <img src="http://174.120.239.48/~peakperf/wp-content/themes/strausberg/images/home_service_retention.jpg" width="200" height="92" />
          </li>
      </ul>

Кроме того, вашКод jquery может быть уменьшен примерно на 90% с помощью функции each ().

Например, добавьте идентификатор в свой ul и сделайте так:

<ul id="mycarousel">

---

    jQuery('#mycarousel').find('span').each(function(){

        jQuery(this).hover(function() {

            jQuery(this).next().fadeIn('slow');

            return false;

        }, function(){

            jQuery(this).next().fadeOut('slow');

            return false;
        });
    });

---

Ps, этот код привязан к текущей html-структуре, вы должны использовать классы, чтобы сделать его более гибким