在div中显示图像并隐藏其他人

Question

我有20个盒子;用户可以选择其中一个。 现在这是我的问题。 我怎样才能做到这一点？如果用户更改了他的选择，我将如何使用jQuery自动淡出前一个选项？

演示在这里： http://arta-web.ir/test/zoom-in.html

HTML：

<div id="main_div" style="width:800px; margin:auto">
  <div class="zoom-box" id="d-1"><p>?</p><div class="tik untik"></div></div>
  <div class="zoom-box" id="d-2"><p>?</p><div class="tik untik"></div></div>
  <div class="zoom-box" id="d-3"><p>?</p><div class="tik untik"></div></div>
.
.
.
  <div class="zoom-box" id="d-4"><p>?</p><div class="tik untik"></div></div>
</div>

CSS：

    .zoom-box {
  background: #7d7e7d;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B7602F', endColorstr='red',GradientType=0);
  background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#B7602F), color-stop(100%,#0e0e0e));
  background: -webkit-linear-gradient(top, yellow 0%,#B7602F 100%);
  background:  -moz-linear-gradient(top, yellow 0%,#B7602F 100%);
  background:   -ms-linear-gradient(top, green 0%,#B7602F 100%);
  background:   -o-linear-gradient(top, green 0%,#B7602F 100%);
  background:     linear-gradient(top, green 0%,#B7602F 100%);
  width:147px;
  height:147px;
  border-radius:50%;
  float:right;
  margin:3px;
  border:solid 2px green;
  font-size:0;
  line-height:0;
  vertical-align:middle;
  text-align:center;
    /*opacity:0*/
    cursor:pointer
}
.zoom-box p{font-size:150px; color:#fff; position:relative; top:-80px; right:30px; float:right}
.zoom-box div.tik{position:relative; z-index:5; width:124px; height:121px; background:url(tik.png) no-repeat; top:15px; right:-5px;}

JQUERY

$(document).ready(function() {
    $('div.tik').css('display','none');
    $('div.zoom-box').click(function() {
        $(this).children("div.tik").fadeToggle(200); // show untik" sign
        $(this).children("p").fadeToggle(200); // hide '?' sign
        $(this).children("div.tik").toggleClass('untik'); // showuntik" sign
        $(".tik .untik").fadeOut();
    });
});

Answer 1

只需隐藏它们，然后再显示点击的一个：

$(document).ready(function() {
    $('div.tik').css('display','none');
    $('div.zoom-box').click(function() {
        $('div.zoom-box div.tik').addClass('untik') // I've added this line...
        $('div.zoom-box div.tik p').fadeOut(200) // ...and this.

        $(this).children("div.tik").fadeToggle(200); // show untik" sign
        $(this).children("p").fadeToggle(200); // hide '?' sign
        $(this).children("div.tik").toggleClass('untik'); // showuntik" sign
        $(".tik .untik").fadeOut();
    });
});

Answer 2

也许你可以用更少的javascript和更多的CSS来实现这一点。

CSS3过渡可用于淡化效果...

.zoom-box .tik {
  opacity:0;  
  ....
}
.zoom-box.untik .tik {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

然后只需使用javascript切换类并隐藏标有特定类的类：

$('div.zoom-box').click(function() {
  // attach untik class
  $(this).toggleClass('untik'); 
  // show untik sign and fade out this one's untik'd siblings
  $(this).siblings('.untik').fadeOut();
});

.zoom-box {
  margin:0 10px;
  color:#fff;
  position:relative;
  font-size:2em;
  font-family:sans-serif;
  font-weight:bold;
  cursor:pointer;
}
.zoom-box p {margin:0;padding:0;}
.zoom-box, .tik {
  background:orange;
  width:50px;
  height:50px;
  text-align:center; 
  float:left;
}
.zoom-box .tik {
  opacity:0;  
  color:green;
  position:absolute;
  top:0;
}
.zoom-box.untik .tik {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_div" style="width:800px; margin:auto">
  <div class="zoom-box" id="d-1"><p>?</p><div class="tik">X</div></div>
  <div class="zoom-box" id="d-2"><p>?</p><div class="tik">X</div></div>
  <div class="zoom-box" id="d-3"><p>?</p><div class="tik">X</div></div>
  <div class="zoom-box" id="d-4"><p>?</p><div class="tik">X</div></div>
</div>