开发者

Help in jQuery animation

问答 作者：

What I want to do something like this bad example, I tried by CSS3 but field to change the picture, at least I made everything in jQuery, but no animation or something wrong, actually I don't know, here is my Attempt BY CSS3.

Here is my code

#maged{
    width:198px; /*140px * 5*/
    height:591px;
    background-color:#0C9;
    position: absolute;
    overflow:hidden;
    top: 14px;
    left: 41px;
        position: relative;
        overflow: hidden;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
        opacity:1;
filter:alpha(opacity=100);
}
#mag开发者_JAVA技巧ed:hover {

        opacity:0;
filter:alpha(opacity=0);
    -moz-transform:  scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
    -webkit-transform:   scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
    transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg); transform-origin: 0% 0%
    background-color:#36F;

    }
#cc_item img{
    position:absolute;
    width:195px;
    height:591px;
    top:-562px;
    left:54px;
}

#cc_title{
    color:#fff;
    line-height:46px;
    font-size:30px;
    top:472px;
    left:59px;
    position:absolute;
    background:#272727;
    width:167px;
    display:block;
    z-index:11;
}
-->
</style>
<script type="text/javascript">
    $(function(evt) {
        $("#maged").click(function() {
            alert("loool");
           $("#cc_item").slideDown("slow");
          $("#cc_title").fadeIn("slow");


            return false;
        });
    });
</script>
</head>

<body>
<div id="maged"></div>

<div id="cc_title">Main page</div>
  <div id="cc_item" style="z-index:5;">
<img src="img30000.jpg" alt="" />
</div>

</body>
</html>

This solution is very CSS heavy, as I wanted to focus on making the HTML cleaner and making sure the general effect worked (though to a lesser degree) when JavaScript is off.

To my knowledge, there's no CSS3 per se, though the CSS may seem advanced. (it's not!)

The most important point for me what that those images really aren't content so I don't think you need to use <img> elements for them; instead use CSS background images... but to animate those background images easily I did have to use a jQuery plugin.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>javascript - Help in jQuery animation</title>
    <style type="text/css">
<!--
    body {
        background:url(http://osc4.template-help.com/wt_32608/images/bg.gif);
        text-align:center;
    }
    ul#menu {
        background:#171717;
        margin:auto;
        overflow:hidden;
        width:985px;
        list-style:none;
        padding:0px;
    }
    ul#menu li {
        list-style:none;
        background:transparent;
        float:left;
        text-align:center;
        width:195px;
        height:591px;
        padding:0px;
        position:relative;
        border:1px solid #FFFFFF;
    }
    ul#menu li a {
        text-decoration:none;
        color:#FFFFFF;
        display:block;
        background:transparent;
        height:591px;
        width:195px;
        position:relative;
    }
    ul#menu li a .menu-text {
        background:#272727;
        width:167px;
        font-size:30px;
        font-family:Arial,Helvetica,sans-serif;
        font-variant:small-caps;
        position:absolute;
        top:224px;
        left:14px;
    }
    ul#menu li a .menu-text .title {
        line-height:46px;
    }
    ul#menu li a .description {
        display:none;
        font-size:smaller;
        text-align:left;
        line-height:auto;
    }
    ul#menu li a:hover .menu-text {
        top:auto;
        width:195px;
        height:152px;
        left:0px;
        bottom:0px;
    }
    body.javascript-enabled ul#menu li a:hover .menu-text {
        top:224px;
        bottom:auto;
        width:167px;
        height:auto;
        left:14px;
    }
    ul#menu li a:hover .description {
        display:block;
        padding-left:30px;
    }
    body.javascript-enabled ul#menu li a:hover .description {
        display:none;
    }
    ul#menu #main-page a {
        background:url(http://osc4.template-help.com/wt_32608/images/img1.jpg) NO-REPEAT;
        background-position:-1000px -1000px;
    }
    ul#menu #about-us a  {
        background:url(http://osc4.template-help.com/wt_32608/images/img2.jpg) NO-REPEAT;
        background-position:-1000px -1000px;
    }
    ul#menu #services a  {
        background:url(http://osc4.template-help.com/wt_32608/images/img3.jpg) NO-REPEAT;
        background-position:-1000px -1000px;
    }
    ul#menu #partners a  {
        background:url(http://osc4.template-help.com/wt_32608/images/img4.jpg) NO-REPEAT;
        background-position:-1000px -1000px;
    }
    ul#menu #locations a  {
        background:url(http://osc4.template-help.com/wt_32608/images/img5.jpg) NO-REPEAT;
        background-position:-1000px -1000px;
    }
    ul#menu #main-page a:hover {
        background-position:top center;
    }
    ul#menu #about-us a:hover  {
        background-position:top center;
    }
    ul#menu #services a:hover  {
        background-position:top center;
    }
    ul#menu #partners a:hover  {
        background-position:top center;
    }
    ul#menu #locations a:hover  {
        background-position:top center;
    }
    body.javascript-enabled ul#menu #main-page a:hover {
        background-position:center -1000px;
    }
    body.javascript-enabled ul#menu #about-us a:hover  {
        background-position:center -1000px;
    }
    body.javascript-enabled ul#menu #services a:hover  {
        background-position:center -1000px;
    }
    body.javascript-enabled ul#menu #partners a:hover  {
        background-position:center -1000px;
    }
    body.javascript-enabled ul#menu #locations a:hover  {
        background-position:center -1000px;
    }
-->
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
    <script src="http://plugins.jquery.com/files/jquery.backgroundPosition.js_7.txt" type="text/javascript"></script>
    <script type="text/javascript">
//<![CDATA[
    $(document).ready(function() {
        $("body").addClass("javascript-enabled");
        $("ul#menu li a")
            .css({backgroundPosition: '0px -591px'})
            .mouseenter(function() {
                $(this).find(".menu-text").hide();
                $(this)
                    .stop().animate({backgroundPosition: '0px 0px'}, 500, function() {
                        $(this).css({backgroundPosition: '0px 0px'});
                        $(this).find(".description").css({display:'block'});
                        $(this).find(".menu-text").css({top:'auto',width:'195px',height:'152px',left:'0px',bottom:'0px'}).fadeIn('slow');
                    });
            })
            .mouseleave(function() {
                $(this).find(".menu-text").hide();
                $(this)
                    .stop().animate({backgroundPosition: '0px -591px'}, 250, function() {
                        $(this).css({backgroundPosition: '0px -591px'});
                        $(this).find(".description").css({display:''});
                        $(this).find(".menu-text").css({top:'',width:'',height:'',left:'',bottom:''}).fadeIn('slow');
                    });
            })
    });
//]]>
    </script>
</head>
<body>
    <ul id="menu">
        <li id="main-page">
            <a href="#main-page"><span class="menu-text"><span class="title">Main page</span> <span class="description">Welcome to our site</span></span></a>
        </li>
        <li id="about-us">
            <a href="#about-us"><span class="menu-text"><span class="title">About us</span> <span class="description">Who we are</span></span></a>
        </li>
        <li id="services">
            <a href="#services"><span class="menu-text"><span class="title">Services</span> <span class="description">&amp; solutions</span></span></a>
        </li>
        <li id="partners">
            <a href="#partners"><span class="menu-text"><span class="title">Partners</span> <span class="description">Partners list</span></span></a>
        </li>
        <li id="locations">
            <a href="#locations"><span class="menu-text"><span class="title">Locations</span> <span class="description">Our contacts</span></span></a>
        </li>
    </ul>
</body>
</html>

Heres my solution to your problem without using css3. It´s all in the 1.html file, jquery and images are poiting to external sources, so you can just run it. Hope this can help you :)

<html>
    <head>
        <style>
            #container{
                overflow: hidden;
                width: 800px;
                height: 600px;
                border: 1px solid black;
                cursor: pointer;
            }
            .maged{
                width:200px;
                height:600px;
                float:left;
                display: none;
            }
            .cc_item{   
                text-align:center;  
                width:200px;    
                height:600px;   
                background:#171717;
                float:left; 
            }
            span.cc_title{  
                color:#fff; 
                line-height:46px;   
                font-size:30px; 
                margin: 250px 10px 0px;  
                float: left;
                background:#272727; 
                width:180px;     
                z-index:11;
            }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(evt) {
                $(".cc_item").hover(function() {
                    $(this).find(".maged").stop(true,true).slideDown(300);
                    $(this).find(".cc_title").fadeOut("slow");
                },function(){
                    $(this).find(".maged").stop(true,true).slideUp(300);
                    $(this).find(".cc_title").fadeIn("slow");
                });
            });
        </script>
    </head>
    <body>
        <div id="container">
            <div class="cc_item" style="z-index:5;">
                <div class="maged">    
                    <img src="http://www.hintmag.com/blog/uploaded_images/richardnicoll08-711189.jpg" alt="" /> 
                </div>
                <span class="cc_title">Main page</span>
            </div>
            <div class="cc_item" style="z-index:5;">
                <div class="maged">    
                    <img src="http://www.hintmag.com/blog/uploaded_images/brunopieters05-717446.jpg" alt="" /> 
                </div>
                <span class="cc_title">Second page</span>
            </div>
            <div class="cc_item" style="z-index:5;">
                <div class="maged">    
                    <img src="http://www.delhierro.ca/wp-content/uploads/2010/11/Fashion-Studio-01S.jpg" alt="" /> 
                </div>
                <span class="cc_title">Third page</span>
            </div>
            <div class="cc_item" style="z-index:5;">
                <div class="maged">    
                    <img src="http://lockdownmodels.files.wordpress.com/2009/05/kell-1.jpg?w=200&h=600" alt="" /> 
                </div>
                <span class="cc_title">Fourth page</span>
            </div>
        </div>
    </body>
</html>

继续阅读：cssjavascriptjqueryjquery-selectors

更多精彩内容

0

上一篇:

下一篇:

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

最新问答

问答排行榜

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，

如存在版权或非法内容，欢迎举报，我们将尽快予以删除。

Copyright © 2018-2020 开发者. All rights reserved.

Powered by 开发者

ICP备案号： 京ICP备10032868号-9