淡入淡出相关 div 动画

Question

所以我有这个代码

$(function () {
 $(".one, .two, .three").click(function (event) {
  event.preventDefault();
  $("#" + $(this).attr("class")).fadeIn().siblings('.popup').hide();
  return false;
 });
 $(".close").click(function (event) {
  event.preventDefault();
  $(".popup").fadeOut();
 });
});

但我不太确定如何制作动画。我想要做的是当您单击 link 时，div 淡入（有效），但是当您单击相关的 link 时，我不希望该框出现淡出又淡入（不过里面的文字除外）。

这是fiddle

谢谢！ x

Answer 1

希望这对你有用

$(函数(){

$(".one, .two, .three").click(function (event) {
    event.preventDefault();
    $("#" + $(this).attr("class")).fadeIn(function(){
        $(this).siblings('.popup').hide();        
    });
    return false;
});


$(".close").click(function (event) {
    event.preventDefault();
    $(".popup").fadeOut();
});

});

这是更新后的 fiddle

Answer 2

为了让它以两种方式正确淡出，我认为你需要使用 z-index:

$(function () {

$(".one, .two, .three").click(function (event) {
    event.preventDefault();
    $("#" + $(this).attr("class")).css('z-index', 1).fadeIn(function(){
        $(this).css('z-index', 0).siblings('.popup').hide();        
    });
    return false;
});


$(".close").click(function (event) {
    event.preventDefault();
    $(".popup").fadeOut();
});
});

这是fiddle

淡入淡出相关 div 动画

Fade in fade out related div animation

javascript

fadeout

fadein