1

当用户单击按钮/ 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>
4

5 回答 5

3

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

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

编辑：这是一些代码

$('.submit_review').click(function() {
  $('.review_submit_box').fadeToggle(300)
})
于 2013-04-29T12:07:41.137 回答
0

而不是检查是否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/

于 2013-04-29T12:10:31.347 回答
0

试试这个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');
    });
});
于 2013-04-29T12:11:04.977 回答
0

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

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

类（淡入、淡出）指定我们将执行什么样的动画。即：使用缓入动画执行与类匹配的关键帧，并且只执行一次并保持在最后一个关键帧。

该课程one仅演示了我们如何为不同的元素提供不同的延迟。

最后，我们有两个按钮（淡出和淡出）。每个都附加了一个“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

<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 上

于 2013-04-29T12:37:49.207 回答
0

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

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

查询

//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

}
于 2017-09-09T19:05:08.863 回答