Jquery动画以闪烁结束

时间：2014-08-08 18:23:36

标签： jquery html animation

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

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

1 个答案:

答案 0 :(得分：1)

所以，我不知道你是否还想看到这个。无论如何，经过一些调整后，我设法得到了我喜欢的东西。我改变了你的HTML和CSS，我希望你不介意。在这种情况下，我更喜欢使用DIV而不是UL＆gt; 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并重置其display属性。第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;
}
相关问题
最新问题