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();
 });
});

但我不太确定如何制作动画。我想要做的是当你点击一个链接，div淡入（它工作），但是当你点击相关的链接，我不希望该框淡出并再次出现（虽然它内部的文本除外））。

这是fiddle

谢谢！ X

Answer 1

希望这适合你

$（function（）{

$(".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动画

2 个答案: