javascript：淡入div按鈕點擊，然後第二個按鈕點擊淡出？

Question

有人可以幫助我試圖讓一個div淡入，當用戶點擊一個按鈕/ div。 然後在第二次點擊我想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> 

Answer 1

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

你可以切換上點擊輸入/輸出褪色，並且會降低代碼的一對夫婦線

的編輯： 這是一些代碼

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


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

的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

的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

Answer 5

我的方法案涉及使用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 

}