显示一个旋转木马上点击每个链接 - 使用jquery和owlcarousel

Question

我有3个轮播，我试图显示每个轮播上点击各自的链接，使用jQuery。

当我将css“display：none”添加到div时，猫头鹰传送带的行为并不正确。旋转木马元素的大小缩小，有时会消失。

我已经做了的jsfiddle它，我会很感激你在寻求帮助什么错误 - https://jsfiddle.net/prtkvarma/yLjw7gsk/3/

感谢。

下面只是代码的JS部分 -

jQuery(document).ready(function($) { 

    $('.owl-one').owlCarousel({ 
    items: 4, 
    lazyLoad: true, 
    margin: 20, 
    nav: true, 
    dots: false, 
    responsive: { 
     0: { 
     items: 2 
     }, 
     480: { 
     items: 3 
     }, 
     786: { 
     items: 4 
     } 
    } 
    }); 

    $('.owl-two').owlCarousel({ 
    items: 4, 
    lazyLoad: true, 
    margin: 20, 
    nav: true, 
    dots: false, 
    responsive: { 
     0: { 
     items: 2 
     }, 
     480: { 
     items: 3 
     }, 
     786: { 
     items: 4 
     } 
    } 
    }); 

    $('.owl-three').owlCarousel({ 
    items: 4, 
    lazyLoad: true, 
    margin: 20, 
    nav: true, 
    dots: false, 
    responsive: { 
     0: { 
     items: 2 
     }, 
     480: { 
     items: 3 
     }, 
     786: { 
     items: 4 
     } 
    } 
    }); 

    /*Change css of links on click*/ 
    $('.select-link li').click(function() { 
    $('.select-link li').removeClass('active-link'); 
    $(this).addClass('active-link'); 
}); 

/*showing/hiding particular carousels on clicking links*/ 
    $('.link-promotions').click(function() { 
    $('.sec-casino-games').hide(); 
    $('.sec-live-odds').hide(); 
    $(".sec-promotions").show(1000); 
    $(".pic1, .pic2, .pic3, .pic4").hide('slow'); 
    }); 

    $('.link-casino-games').click(function() { 
    $('.sec-promotions').hide(); 
    $('.sec-live-odds').hide(); 
    $(".sec-casino-games").show(1000); 
    $(".pic1, .pic2, .pic3, .pic4").hide('slow'); 
    }); 

    $('.link-live-odds').click(function() { 
    $('.sec-promotions').hide(); 
    $('.sec-casino-games').hide(); 
    $(".sec-live-odds").show(1000); 
    $(".pic1, .pic2, .pic3, .pic4").hide('slow'); 
    }); 

}); 

Answer 1

您通常想走就走从建于上元素硬编码内嵌样式的特殊效果，充分利用图书馆是视觉的用户体验沉重。原因是因为内置特殊效果的jQuery都直接改变元素的style属性，这通常会与库CSS规则冲突。

我冒昧地将大部分jQuery重写为更简单，更少冗余和简化。要回答你的问题，最主要的是利用.addClass()方法，它允许你为元素添加类，就像.hide()那样。这是通过在使用.addClass()方法时将毫秒时间作为第二参数来完成的。

jQuery的

jQuery(document).ready(function($) { 
    $('.owl-carousel').each(function(index, element) { 
     jQuery(element).owlCarousel({ 
      items: 4, 
      lazyLoad: true, 
      margin: 20, 
      nav: true, 
      dots: false, 
      responsive: { 
       0: { 
        items: 4 
       } 
      } 
     }); 
    }); 

    var owl_content = jQuery('.owl-carousel'); 
    var owl_links = jQuery('.select-link a'); 

    jQuery(owl_links).each(function(index, element) { 
     jQuery(element).click(function(e) { 
      jQuery(owl_content).each(function(i, el) { 
       jQuery(el).addClass('c', 500); 
       if (i === index) { 
        jQuery(owl_content[index]).removeClass('c', 500); 
        console.log(i); 
       } 
      }); 
     }); 
    }); 

    /*Change css of links on click*/ 
    $('.select-link li').click(function() { 
     $('.select-link li').removeClass('active-link'); 
     $(this).addClass('active-link'); 
    }); 

    jQuery('.c.first').removeClass('c'); 
}); 

小提琴

https://jsfiddle.net/dixalex/yLjw7gsk/8/

来源

animating addClass/removeClass with jquery