Question

我知道有很多jquery可以帮助我..我已经编写了代码，但最后一件事失败了，

图像（从最左侧）两个和三个应该淡出，第一个图像将在点击button1时向左滑动。按钮拖曳和三个相同。
如果第一部分处于活动状态（左图像和底部文本），则单击button1然后它们应淡入淡出并重新显示并具有滑动效果。

$(".c2").css("display", "none");
$(".c3").css("display", "none");
$(".image03").css("display", "none");
$(".image02").css("display", "none");
$(document).ready(function() {
    $('.img01').click(function() {
        $(".image01").show("slide", {
            direction: "left"
        });
        $(".c1").show("slide", {
            direction: "right"
        });
        $(".c2").css("display", "none");
        $(".c3").css("display", "none");
        $(".image03").effect('fade', 200).css("display", "none");
        $(".image02").effect('fade', 200).css("display", "none");
    });

    $('.img02').click(function() {
        $(".image02").show("slide", {
            direction: "left"
        }, 500);
        $(".c2").show("slide", {
            direction: "right"
        }, 500);
        $(".c1").effect('fade', 200).css("display", "none");
        $(".c3").effect('fade', 200).css("display", "none");
        $(".image03").effect('fade', 200).css("display", "none");
        $(".image01").effect('fade', 200).css("display", "none");
    });
    $('.img03').click(function() {
        $(".image03").show("slide", {
            direction: "left"
        }, 500);
        $(".c3").show("slide", {
            direction: "right"
        }, 500);
        $(".c1").effect('fade', 200).css("display", "none");
        $(".c2").effect('fade', 200).css("display", "none");
        $(".image02").effect('fade', 200).css("display", "none");
        $(".image01").effect('fade', 200).css("display", "none");
    });
});

.slide {
  padding-top: 30px;
}
.img01, .img02, .img03 {
  cursor: pointer;
}

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
      <div class="row">
       	<div class="col-xs-6">
        	<div class="img-show">
                <div class="image01 slide"><img src="http://classes.yale.edu/fractals/panorama/nature/Rivers/RiversS.gif" class="img-responsive" /></div>
                <div class="image02 slide"><img src="http://shalomisraeltours.com/wp-content/uploads/2011/03/Amud-Stream-Nature-Reserve-200x100.jpg" class="img-responsive" /></div>
                <div class="image03 slide"><img src="http://naturepreserves.ohiodnr.gov/portals/dnap/WebSitesCreative_PostIt/27763/ec1ef173-8b35-414c-a8c3-ff06d141590e.jpg" class="img-responsive" /></div>
            </div>
        </div>
        <div class="col-xs-6 img-ico">
        	<div class="img01 col-xs-4"><img src="http://www.codeproject.com/KB/buttons/netimagebutton/ExampleButton.png" width="43" height="31" />Design</div>
            <div class="img02 col-xs-4"><img src="http://getsafesea.com/images/submit-button.png" width="43" height="31" />Design</div>
            <div class="img03 col-xs-4"><img src="http://softwaresupportserviceshost.com/caaconnect/wp-content/uploads/sites/2/2013/06/login-button.png" width="43" height="31" />Design</div>
            <div class="clearfix"></div>                    
            <div class="content">
            	<div class="contentshow c1">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</div>
                <div class="contentshow c2">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</div>
                <div class="contentshow c3">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</div>
            </div>
        </div>
    </div><!--row-->
    </div><!--container-->

Answer 1

我认为jQuery fadeOut()方法会为您提供所需的内容。我已经实施了一个可能的解决方案，希望我已经理解了您的要求我也借此机会重构你的代码：

＆＃13;

$(document).ready(function() {
  Reload('.image01', '.c1'); // first load

  $('.img01').click(function() {
    Reload('.image01', '.c1');
  });

  $('.img02').click(function() {
    Reload('.image02', '.c2');
  });
  $('.img03').click(function() {
    Reload('.image03', '.c3');
  });
});

function Reload(imageClass, contentClass) {
  $(".c1").fadeOut();
  $(".c2").fadeOut();
  $(".c3").fadeOut();
  $(".image01").fadeOut("slow", function() {
    $(".image02").fadeOut("slow", function() {
      $(".image03").fadeOut("slow", function() {
        $(imageClass).show("slide", {
          direction: "left"
        }, 500);
        $(contentClass).show("slide", {
          direction: "right"
        }, 500);
      });
    });
  });
}

＆＃13;

请参阅我的演示here

有人可以解决我的问题

1 个答案: