Помощь в анимации jQuery - PullRequest
Новая
       12

Помощь в анимации jQuery

2 голосов
/ 12 марта 2011

Что я хочу сделать что-то вроде этот плохой пример , я пытался CSS3, но поле, чтобы изменить картинку, , по крайней мере, я сделал все в jQuery , но без анимации или что-тонеправильно, на самом деле я не знаю, вот моя попытка по CSS3 .

вот мой код 

#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);
}
#maged: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>

Ответы [ 2 ]

1 голос
/ 13 марта 2011

Это решение очень тяжелое для CSS, так как я хотел сосредоточиться на том, чтобы сделать HTML чище и убедиться, что общий эффект работает (хотя и в меньшей степени), когда JavaScript отключен.

Насколько мне известно, естьнет CSS3 как такового, хотя CSS может показаться продвинутым.(это не так!)

Самое важное для меня то, что эти изображения на самом деле не являются контентом, поэтому я не думаю, что вам нужно использовать <img> элементы для них;вместо этого используйте фоновые изображения CSS ... но чтобы легко анимировать эти фоновые изображения, мне пришлось использовать плагин jQuery . 

<!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>
0 голосов
/ 13 марта 2011

Вот мое решение вашей проблемы без использования css3. Все это в файле 1.html, jquery и изображения ориентированы на внешние источники, так что вы можете просто запустить его. Надеюсь, это поможет вам:) 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...