Question

我目前正在使用网络教程中的以下代码来显示/隐藏DIV。它效果很好，但不喜欢这种效果。希望DIV能够淡出/淡出（或者更平滑的东西，目前DIV从右上角开始生长）。我怎样才能调整代码来做到这一点？你在这里http://jsfiddle.net/Grek/w4HWn/1/非常感谢

function showonlyone(thechosenone) {
     $('.textzone').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(2000);
          }
          else {
               $(this).hide(2000);
          }
     });
}

Answer 1

只需将.hide()更改为.fadeOut()，将.show()更改为.fadeIn()

但是看看你的例子，你可以通过使用数据属性来更简单地做到这一点。

看看这个example。

你可能需要绝对定位或其他技术，因为两个div在淡入和淡出时叠加。

Answer 2

您可以使用fadeIn和fadeOut方法，也可以缩小代码，尝试以下操作：

function showonlyone(thechosenone) {
     $('.textzone').fadeOut();
     $('#'+thechosenone).fadeIn();
}

<小时/> 在使用jQuery时，您可以使用jQuery click处理程序：

HTML：

<div class="source-title-box"><span class="activity-title"><a href="#source-region">Our region</a></span></div>
<div class="source-title-box"><span class="activity-title"><a href="#source-oursource">Our source</a></span></div>

jQuery的：

$('.activity-title a').click(function(e){
    e.preventDefault()
     var thechosenone = $(this).attr('href');
    $('.textzone').fadeOut(600, function(){
         $(thechosenone).fadeIn(600);
    });   
})

DEMO

隐藏/显示DIV - 将当前效果更改为淡入淡出

2 个答案: