onclick 功能淡入淡出内容轮播答案

【问题标题】：onclick function fade in fade out content carouselonclick 功能淡入淡出内容轮播
【发布时间】：2016-01-23 00:38:09
【问题描述】：

晚上，

我在某些内容上的 onclick 淡入和淡出动画遇到问题这是导航的 html 脚本：

<div class="col s12 m4">

    <h4 class="pict-menu"><a href="#!" id="type1" class="waves-effect waves-default">type1</a></h4>
    <h4 class="pict-menu"><a href="#!" id="type2" class="waves-effect waves-default">type2</a></h4>

</div>

这就是内容

<div class="col s12 m8 owl-carousel owl-theme" id="type-1">
    <?php foreach($regent as $row): ?>
    <div class="item"><img class="responsive-img" src="<?php echo base_url(); ?>admin/assets/images/media/<?php echo $row->media_file; ?>" alt="<?php echo $row->media_title; ?>"></div>
    <?php endforeach; ?>
</div>

<div class="col s12 m8 owl-carousel owl-theme" id="type-2">
    <div class="item"><img class="responsive-img" src="<?php echo base_url(); ?>assets/serenia/images/slide1.jpg" alt=""></div>
    <div class="item"><img class="responsive-img" src="<?php echo base_url(); ?>assets/serenia/images/slide2.jpg" alt=""></div>
</div>

javascript

function type_click() {
    $("#type1").click(function() {
        $("#type-1").fadeIn(300);
        $("#type-2").fadeOut(300);
    });

    $("#type2").click(function() {
        $("#type-2").fadeIn(300);
        $("#type-1").fadeOut(300);
    });
}
$(function() {type_click()});

当我只使用 2 个内容时它工作正常，但当我尝试使用超过 2 个内容时它不能正常工作。将不胜感激任何帮助。提前致谢。

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

试试这个：

https://jsfiddle.net/y6xjuoba/

HTML

<div class="col s12 m4">

  <h4 class="pict-menu"><a href="#!" id="type-1" class="waves-effect waves-default">type1</a></h4>
  <h4 class="pict-menu"><a href="#!" id="type-2" class="waves-effect waves-default">type2</a></h4>
  <h4 class="pict-menu"><a href="#!" id="type-3" class="waves-effect waves-default">type3</a></h4>
  <h4 class="pict-menu"><a href="#!" id="type-4" class="waves-effect waves-default">type4</a></h4>

</div>



<div class="col s12 m8 owl-carousel owl-theme" id="type-2">
  <div class="item type-1">test1</div>
  <div class="item type-2">test2</div>
  <div class="item type-3">test3</div>
  <div class="item type-4">test4</div>
</div>

JS：

function type_click() {
  $(".waves-effect").click(function() {
    var clicked = $(this).hasClass("clicked")
    if (clicked !== true) {
      var currImage = '.' + $(this).attr("id"); + '"'
      $(".waves-effect").removeClass("clicked");
      $(this).addClass("clicked");

      $(".item").fadeOut(300);
      $(currImage).fadeIn(300);
    }

  });

}
$(function() {
  type_click()
});

这有点乱，但它应该适用于任意数量的图像。只需确保轮播项目 div 的类等于 pict-menu 链接的 id。如果您有大量图像要轮播，您可能需要考虑某种模板解决方案，例如Handlebars.

【讨论】：

非常感谢！我希望我能给你更多的支持！
快速提问，我怎样才能只加载一项？似乎您在第一页加载时加载了所有项目。我已经编辑了您的一些 jquery 以在单击的项目上添加类.. 这里 jsfiddle.net/y6xjuoba/1

【解决方案2】：

$(".owl-theme").click(function() { //select by class
    var clicked  = $(this);
    clicked.fadeIn(300); //fade selected element in
    $('.owl-theme').not(clicked).fadeOut(300); //fade everything except clicked element out
});

https://jsfiddle.net/zkqf6mjz/

【讨论】：

对不起，不工作。请检查我编辑的问题