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>