Jquery动画最终闪烁

Question

我无法获得如下链接所示的动画

http://www.davidbo.dreamhosters.com/plugins/mediaBoxes/example/demo4.html

我已经尝试过 animate()、hide() 和 display() 函数，但最终出现了闪烁。我需要点击类别时显示的动画。

<section class="recent_work">
<h1>RECENT WORKS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et quam <br> est. Mauris faucibus tellus ac auctor posuere. </p>
<ul class="menu_bar">
<li id="ALL" class="all">ALL</li>
<li id="WEB" class="web">WEB</li>
<li id="MOBILE" class="mobile">MOBILE</li>
<li id="PHOTOGRAPHY" class="photography">PHOTOGRAPHY</li>
<li id="DESIGN" class="design">DESIGN</li>
<li id="TYPE" class="type">TYPE</li>
</ul>
<ul class="work_samples">
<li><a href="#" class="design"><img src="images/recent work/design.png" />
<h2>title</h2>
<p>please describe the<br> product</p>
</a>
</li>
<li><a href="#" class="mobile"><img src="images/recent work/mobile.png" />
<h2>title</h2>
<p>please describe the<br> product</p></a></li>
<li><a href="#" class="photography"><img src="images/recent work/photography.png" />
<h2>title</h2>
<p>please describe the<br> product</p></a></li>
<li><a href="#" class="type"><img src="images/recent work/type.png" />
<h2>title</h2>
<p>please describe the<br> product</p></a></li>
<li><a href="#" class="web"><img src="images/recent work/web2.png" />
<h2>title</h2>
<p>please describe the<br> product</p></a></li>
<li><a href="#" class="web"><img src="images/recent work/web.png" />
<h2>title</h2>
<p>please describe the<br> product</p></a></li>
</ul>
</section>


.recent_work{
background-color:#9ad4a6;
}
.work_samples h2,.work_samples p{
text-align:center;
}
.recent_work h1{
font-family: Lato-Bold;
font-size: 64px;
text-align: center;
margin: 0px auto;
padding: 50px 0px 0px 0px;
color:#ffffff;
}
.recent_work p{
font-family: Lato;
text-align: center;
color: #ffffff;
font-size: 20px;
padding: 10px;
}
.work_samples a{
margin: 30px;
display: inline-block;
text-decoration:none;
}
.menu_bar li{
display:inline;
list-style:none;
margin:0px 10px;
padding:10px 21px;
COLOR:#FFFFFF;
font-family:Lato-Bold;
font-size:22px;
border:3px solid #9ad4a6;
cursor:pointer;
}
.menu_bar{
margin: 98px auto 20px;
text-align:center;
}
.menu_bar li:HOVER
{
border:3px solid #ffffff;
border-radius:10px
}
.work_samples{
display:block;
max-width: 950px;
margin: 0px auto;
}
.work_samples li{
list-style:none;
display:inline-block;
}


$(document).ready(function(e){
$(".menu_bar>li").hover(function(){
$(this).css({"border":"3px solid #fff","border-radius":"10px"});
},function(){
$(this).css({"border":"3px solid #9ad4a6","border-radius":"10px"});
});

$("#ALL").css({"background":"#fff","border-        radius":"10px","color":"#a3a3a3","border":"3px solid #fff"});

$(".menu_bar>li").click(function (event) {
event.preventDefault()
$(".menu_bar>li").css({"background-color":"#9ad4a6","color":"#fff","border":"3px solid #9ad4a6"});
$(this).animate({'background-color':'#fff',"border-radius":"10px","color":"#a3a3a3","border":"3px solid #fff"});
var classname=$(this).text().toLowerCase();
$('.'+classname).show(0);
$(".work_samples>li>a").not($('.'+classname)).hide(500);


if(classname=='all')
{$(".work_samples>li>a").show(500);}
});

Answer 1

所以，我不知道你是否还想看这个。无论如何，经过这里和那里的一些调整，我设法得到了我喜欢的东西。我改变了你的 html 和 css，希望你不会介意。在这种情况下，我更喜欢使用 DIV 而不是 UL>LI。你会明白为什么。我也喜欢将内容分成单独的 div。

首先，我搜索了一下，找到了一种让所有 div 始终居中的方法。这意味着，如果有人调整浏览器的大小，div 将始终居中并且实际上按行平均分布。 SOURCE

WORKING EXAMPLE

这是新的 html。请注意“.items-container”中的所有 div 如何拥有不同数量的类。这些类将定义一个过滤器，因此请确保为所有 div 提供相关类。除了对所有人都是强制性的“项目”类。

<section class="recent_work">
    <div class="top-container">
        <h1>RECENT WORKS</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et quam <br> est. Mauris faucibus tellus ac auctor posuere. </p>
        <ul class="menu_bar">
            <li id="ALL" data-filter="all" class="active-item">ALL</li>
            <li id="WEB" data-filter="web">WEB</li>
            <li id="MOBILE" data-filter="mobile">MOBILE</li>
            <li id="PHOTOGRAPHY" data-filter="photography">PHOTOGRAPHY</li>
            <li id="DESIGN" data-filter="design">DESIGN</li>
            <li id="TYPE" data-filter="type">TYPE</li>
        </ul>
    </div>

    <div class="middle-container">

        <div class="items-container">
            <div class="item design">
                <a href="#">
                    <!-- <img src="images/recent work/design.png" /> -->
                    <h2>title</h2>
                    <p>please describe<br/>the product</p>
                </a>
            </div>
            <div class="item mobile type">
                <a href="#">
                    <!-- <img src="images/recent work/mobile.png" /> -->
                    <h2>title</h2>
                    <p>Lorem ipsum</p>
                </a>
            </div>
            <div class="item photography design web type">
                <a href="#">
                    <!-- <img src="images/recent work/photography.png" /> -->
                    <h2>title</h2>
                    <p>Hello world</p>
                </a>
            </div>
            <div class="item type design">
                <a href="#">
                    <!-- <img src="images/recent work/type.png" /> -->
                    <h2>title</h2>
                    <p>Hola amigo</p>
                </a>
            </div>
            <div class="item web">
                <a href="#">
                    <!-- <img src="images/recent work/web2.png" /> -->
                    <h2>title</h2>
                    <p>Very nice day</p>
                </a>
            </div>
            <div class="item web type">
                <a href="#">
                    <!-- <img src="images/recent work/web.png" /> -->
                    <h2>title</h2>
                    <p>I like web</p>
                </a>
            </div>
            <div class="item design web">
                <a href="#">
                    <!-- <img src="images/recent work/design.png" /> -->
                    <h2>title</h2>
                    <p>A cup of tea please</p>
                </a>
            </div>
            <div class="item mobile web photography">
                <a href="#">
                    <!-- <img src="images/recent work/mobile.png" /> -->
                    <h2>title</h2>
                    <p>Donde esta?</p>
                </a>
            </div>
            <div class="item photography design mobile">
                <a href="#" class=" s">
                    <!-- <img src="images/recent work/photography.png" /> -->
                    <h2>title</h2>
                    <p>Gd'ay Mate!</p>
                </a>
            </div>
            <div class="item type mobile web">
                <a href="#" class=" s">
                    <!-- <img src="images/recent work/type.png" /> -->
                    <h2>title</h2>
                    <p>Bonjour cher ami!</p>
                </a>
            </div>
        </div>
    </div>
</section>

接下来，开始动画。动画非常简单，单击菜单 LI，我得到它的自定义属性，其中包含一个过滤器/类名。第 1 步是定位所有 div 并将它们缩放到 0。第 2 步，应用一个 CSS 将不显示所有 div。第 3 步，我们获取过滤器名称，并针对所有拥有此类名称的 div 并重置其显示属性。第 4 步，所有目标元素将重新缩放为默认值，并完美地并排并居中。

这是最终的 Jquery 代码：

$(function () {
    $(".menu_bar>li").hover(function(){
        $(this).css({"border":"3px solid #fff","border-radius":"10px"});
    },function(){
        $(this).css({"border":"3px solid #9ad4a6","border-radius":"10px"});
    });

    $(".menu_bar li").click(function (event) {

        //Prevent animation on already active button
        if($(this).hasClass('active-item')){
            return false;
        }

        //Set active menu item style
        $(".menu_bar li").removeClass('active-item');
        $(this).addClass('active-item');

        var classname = $(this).attr('data-filter');

        if(classname=='all')
        {
            //Scale to 0 all boxes
            $('.item').addClass('hide-item');

            setTimeout(function(){
                //Change opacity and display property of all boxes we do not want to show
                $('.hide-item').addClass('hide-my-box');

                setTimeout(function(){
                    //Reset to default opacity and display property of all boxes we want to show
                    $('.item').removeClass('hide-my-box');

                    //Scale to default all boxes we want to show
                    setTimeout(function(){
                        $('.item').removeClass('hide-item');
                    }, 10);
                }, 200);                
            }, 200);

        }
        else{
            //Scale to 0 all boxes
            $('.item').addClass('hide-item');

            setTimeout(function(){
                //Change opacity and display property of all boxes we do not want to show
                $('.hide-item').addClass('hide-my-box');

                setTimeout(function(){
                    //Reset to default opacity and display property of all boxes we want to show
                    $('.'+classname).removeClass('hide-my-box');

                    //Scale to default all boxes we want to show
                    setTimeout(function(){
                        $('.'+classname).removeClass('hide-item');
                    }, 10);
                }, 200);                
            }, 200);
        }
    });
});

CSS：

*{
    margin:9;
    padding: 0;
}

body{
    height: 100%;
}

html{
    background-color:#9ad4a6;
}

.recent_work{
    background-color:#9ad4a6;
    height: 100%;
}
.work_samples h2,.work_samples p{
    text-align:center;
}

.recent_work h1{
    font-family: Lato-Bold;
    font-size: 64px;
    text-align: center;
    margin: 0px auto;
    padding: 50px 0px 0px 0px;
    color:#ffffff;
}

.recent_work p{
    font-family: Lato;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    padding: 10px;
}

.menu_bar li{
    display:inline-block;
    list-style:none;
    margin:0px 10px;
    padding:10px 21px;
    COLOR:#FFFFFF;
    font-family:Lato-Bold;
    font-size:22px;
    border:3px solid #9ad4a6;
    cursor:pointer;
}

.menu_bar{
    margin: 98px auto 20px;
    text-align:center;
}

.menu_bar li:HOVER
{
    border:3px solid #ffffff;
    border-radius:10px
}

.active-item{
    background:#fff;
    border-radius:10px;
    color:#a3a3a3 !important;
    border:3px solid #fff !important;
}

.hide-item{
    transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0); 
    -moz-transform: scale(0);
}

.hide-my-box{
    display: none !important;
    -webkit-transition: opacity .3s ease-out;
    opacity: 0; 
}

.top-container{
    position: relative;
    display: block;
}

.middle-container{
    position: relative;
    margin-top: 50px;
    margin-bottom: 50px;
    height: 100%;
}

.items-container{
    position:absolute;
    bottom:0px;
    width:100%;
    text-align:center;
    height:100%;
}

.item{
    margin: 15px;
    width:250px;
    height: 200px;
    display:inline-block;
    vertical-align: top;
    background: #ebebeb;
    -webkit-transition: .3s all ease-in-out;
   -moz-transition: .3s all ease-in-out;
   -o-transition: .3s all ease-in-out;
   transition: .3s all ease-in-out;
   border:1px solid;
}

.item p{
    color:#000;
}