javascript：淡入div按钮点击，然后第二个按钮点击淡出？

问题描述：

有人可以帮助我试图让一个div淡入，当用户点击一个按钮/ div。然后在第二次点击我想div再次淡出，我想这个脚本重复/重复。javascript：淡入div按钮点击，然后第二个按钮点击淡出？

这里是我使用淡入股利什么：

<script> 

    $('.submit_review').click(function() { 
     if ($('.submit_review').is(":visible")) { 
      $('.review_submit_box').delay(400).fadeIn(300); 




     } 
    }); 
</script>

这里就是我试图做的就是它以淡入淡出按钮点击，但我需要在正确的方向上推谢谢。

<script> 

    $('.submit_review').click(function() { 
     if ($('.submit_review').is(":visible")) { 
      $('.review_submit_box').delay(400).fadeIn(300); 

     } else if ($('.submit_review').click(function() { 
     $('.review_submit_box').is(":visible")) { 
      $('.review_submit_box').fadeOut(300); 



     } 
    }); 
</script>

HTML：

<div class="reviews_section"> 
<div class="submit_review"><div class=" 
submit_review_text">Submit a Review</div></div> 
<div class="review_submit_box"></div> 
</div> 
<div class="reviews_section2"> 
<?php include('includes/mod_profile/mod_reviews/mod_reviews.php'); ?> 

</div>

添加您的html代码... – 2013-04-29 12:03:04

http://stackoverflow.com/about – Xotic750 2013-05-11 09:28:55

答

为什么不直接使用jQuery的fadeToggle http://api.jquery.com/fadeToggle/

你可以切换上点击输入/输出褪色，并且会降低代码的一对夫妇线

的编辑：这是一些代码

这篇作品出来的吗？ – Oktav 2013-04-30 09:49:37

答

而不是检查is(:visible)是否只为div添加隐藏类并检查它是否存在。

$(function() { 
    $('#divvy').addClass('hidden').hide(); 
    $('#button').click(function() { 
     if ($('#divvy').hasClass('hidden')) { 
      $('#divvy').removeClass('hidden').fadeIn(1000); 
     } 
     else { 
      $('#divvy').addClass('hidden').fadeOut(1000); 
     } 
    }); 
}); 


<div id="divvy"> 
    I will appear and then fade! 
</div> 
<input type="button" value="Click me" id="button" />

的jsfiddle：http://jsfiddle.net/j7HTY/1/

答

尝试此http://jsfiddle.net/gabrieleromanato/cX88R/

var test = $('#test'), 
    $in = $('#in'), 
    out = $('#out'), 
    toggle = $('#toggle'), 
    to = $('#to'); 


$in.click(function() { 
    test.fadeIn(1000, function() { 
     alert('Complete'); 
    }); 
}); 


out.click(function() { 
    test.fadeOut(1000, function() { 
     alert('Complete'); 
    }); 
}); 


toggle.click(function() { 
    test.fadeToggle(1000, function() { 
     alert('Complete'); 
    }); 
}); 

to.click(function() { 
    test.fadeTo(1000, 0.5, function() { 
     alert('Complete'); 
    }); 
});

答

这里是使用JavaScript和CSS3

的keyframes（有其中3为每个方法，支持的webkit的方法，firefox和标准），它们定义了我们的开始和结束状态。

class（淡入，淡出）指定我们将执行什么样的animation。即：使用ease-in动画并仅保留do it once，并且保留在最后一个关键帧上。

类one只是演示了我们如何给不同的元素提供不同的延迟。

最后，我们有两个按钮（淡入淡出）。每个人都有一个“点击”连接的event listener。点击后，他们交换div上的课程，以便执行动画。 CSS

@-webkit-keyframes fadeIn { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-moz-keyframes fadeIn { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@keyframes fadeIn { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
.fade-in { 
    opacity:0; 
    -webkit-animation:fadeIn ease-in 1; 
    -moz-animation:fadeIn ease-in 1; 
    animation:fadeIn ease-in 1; 
    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 
    -webkit-animation-duration:1s; 
    -moz-animation-duration:1s; 
    animation-duration:1s; 
} 
.fade-in.one { 
    -webkit-animation-delay: 1s; 
    -moz-animation-delay: 1s; 
    animation-delay: 1s; 
} 
@-webkit-keyframes fadeOut { 
    from { 
     opacity:1; 
    } 
    to { 
     opacity:0; 
    } 
} 
@-moz-keyframes fadeOut { 
    from { 
     opacity:1; 
    } 
    to { 
     opacity:0; 
    } 
} 
@keyframes fadeOut { 
    from { 
     opacity:1; 
    } 
    to { 
     opacity:0; 
    } 
} 
.fade-out { 
    opacity:1; 
    -webkit-animation:fadeOut ease-in 1; 
    -moz-animation:fadeOut ease-in 1; 
    animation:fadeOut ease-in 1; 
    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 
    -webkit-animation-duration:1s; 
    -moz-animation-duration:1s; 
    animation-duration:1s; 
} 
.fade-out.one { 
    -webkit-animation-delay: 1s; 
    -moz-animation-delay: 1s; 
    animation-delay: 1s; 
}

HTML

<button id="in">Fade In</button> 
<button id="out">Fade Out</button> 
<div id="myDiv" class="fade-in one">Some text</div>

的Javascript

var myDiv = document.getElementById("myDiv"); 

document.getElementById("in").addEventListener("click", function() { 
    myDiv.className = myDiv.className.replace(/fade-out/, "").trim() + " fade-in"; 
}, false); 

document.getElementById("out").addEventListener("click", function() { 
    myDiv.className = myDiv.className.replace(/fade-in/, "").trim() + " fade-out"; 
}, false);

在jsfiddle

答

我的方法案涉及使用jQuery选择检查div和按钮元素的索引。

我使用index()来获取类名为“.review_submit_box”的元素的位置，如果它没有与调用“.submit_review”按钮具有相同索引，则使其淡出。

类名为“.review_submit_box”的div的数量必须与类名为“.submit_review”的按钮的数量相同，才能正常工作而不会出现问题。并且还可以匹配右侧按钮的索引来调用右侧的框。这是安排在HTML中排序。（即，使一类按钮中的第一个按钮调用一个div类中的第一个div，它与呼叫按钮具有相同的索引/位置）

要使其自动化，您可以使另一个函数淡出所有的div和淡入div的索引匹配一个变量的值迭代，并有一个超时重复调用函数的值。

我的解决方案更适合传送带而不是复选框，希望它有帮助。

HTML

<div class="review_submit_box"> 
        <div> 
         <h2>BEST DESIGN</h2> 
        </div> 
       </div> 

       <div class="review_submit_box"> 
        <div> 
         <h2>BEST SERVICES</h2> 
        </div> 
       </div> 

       <div class="review_submit_box"> 
        <div> 
         <h2>BEST EQUIPMENT</h2> 
        </div> 
       </div> 

       <div id="controls-div"> 
        <button class="submit_review">SHOW</button> 
        <button class="submit_review">SHOW</button> 
        <button class="submit_review">SHOW</button> 
       </div>

JQUERY

//GLOBAL VARIABLES 
var activeCarouselIndex = 0; 

//FADE OUT OTHER DIVS AND FADE IN THE DIV WITH SAME INDEX AS CALLING BUTTON 
$(".submit_review").on('click',function(event){ 

    var carouselBtnIndex = $(this).index(); 

    alert("You have clicked button with index: "+carouselBtnIndex); 

    activeCarouselIndex = carouselBtnIndex; 

    $(".review_submit_box").each(function() { 

     if($(this).index() !== activeCarouselIndex) { 

      $(this).fadeOut(900); 

     } else { 

      $(this).fadeIn(900);  
     } 

    }); 

}); 

//SET AUTOMATIC SLIDING 
slideCarousels(); 

function slideCarousels() { 

    $(".review_submit_box").each(function() { 

     if($(this).index() !== activeCarouselIndex) { 
      $(this).fadeOut(900); 
     } 

    }); 

    $(".review_submit_box").eq(activeCarouselIndex).fadeIn(900); 

    activeCarouselIndex++; 
    if (activeCarouselIndex >= $(".review_submit_box").length) {activeCarouselIndex = 0} 

    setTimeout(slideCarousels, 2000); // Change every 2 seconds 

}

javascript：淡入div按钮点击，然后第二个按钮点击淡出？

相关推荐