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()方法，它允许你.animate()向你的元素添加类，就像.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

单击每个链接显示轮播 - 使用Jquery和OwlCarousel

1 个答案: