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

当用户点击按钮/ div时，有人可以帮助我尝试让div淡入淡出。 然后在第二次点击我希望div再次淡出，我希望这个脚本重复/重复。

这是我用来淡化div的内容：

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

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

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

HTML：

 
 
Submit a Review
 
 
 
   

Answer 1

为什么不简单地使用jQuery的fadeToggle http://api.jquery.com/fadeToggle/

您可以在点击时切换淡入/淡出，这会将您的代码减少到几行

编辑：这是一些代码

 $('.submit_review').click(function() { $('.review_submit_box').fadeToggle(300) }) 

Answer 2

而不是检查是否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); } }); }); 
 I will appear and then fade! 
  

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

Answer 3

试试这个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'); }); }); 

Answer 4

这是一个使用javascript和css3的方法

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

课程 （淡入淡出，淡出）分配我们将执行的动画类型。 这是：使用轻松动画做匹配类的关键帧，只做一次并保留在最后一个关键帧。

第一节只是演示了我们如何为不同的元素提供不同的延迟。

最后，我们有两个按钮（Fade和Fade Out）。 每个都附加一个“click” 事件监听器。 单击时，它们会在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

 Fade In Fade Out 
Some text 

使用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

Answer 5

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

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

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

为了使它自动化，你可以创建另一个函数淡出所有div并淡入div，索引匹配一个变量值的变量，并且有一个超时来重复调用该函数。

我的解决方案更适合旋转木马，而不是审查框，希望它有所帮助。

HTML

 
 
 
BEST DESIGN
 
 
 
 
 
BEST SERVICES
 
 
 
 
 
BEST EQUIPMENT
 
 
 
 SHOW SHOW SHOW  

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 }