Question

当有用户点击按钮/ div时，有人会帮助我尝试让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/

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

编辑：这是一些代码

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


<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只是演示了我们如何为不同的元素提供不同的延迟。

最后，我们有两个按钮（Fade和Fade Out）。每个人都有一个＆＃34;点击＆＃34; 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

}

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

5 个答案: