Zunächst danke ich Ihnen, dass Sie mich in die Gruppe aufgenommen haben. Ich brauche Hilfe bei einer Frage zur Animation mit jQuery. Dies ist eine Animation, die ich auf Elementen im Navigationsmenü dieser Vorlage gefunden habe, dem Vorlagenmonster.

http://www.templatemonster.com/demo/40492.html

Anscheinend sind dies zwei Bilder, die sich auf der Leinwand bewegen und irgendwann allmählich verblassen.

Beim Studium von Beispielen für jQuery habe ich gesehen, dass ein Teil des Effekts mit dem Animationsattribut top (css) erzielt wird. Leider verschwindet das von mir animierte Element nicht allmählich wie im Beispiel im Link gezeigt.

Bitte helfen Sie mir zu verstehen, wie ich mit jQuery den gleichen Effekt erzielen kann.

0
Tiago dos Santos 7 Dez. 2013 im 07:56

3 Antworten

Beste Antwort

Sie können es einfach wie unten machen.

CSS

@font-face {
  font-family: 'Six Caps';
  font-style: normal;
  font-weight: 400;
  src: local('Six Caps'), local('SixCaps'), url(http://themes.googleusercontent.com/static/fonts/sixcaps/v5/tMrhQDUBAHnnGuM33-yobPesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
.clear{clear:both;}
.nav{}
.menubox{width:200px;float:left;margin:0px 10px;height:80px;overflow:hidden;position:relative;font-family: 'Six Caps', sans-serif;line-height: 80px;color: #161616;font-size: 80px;color:#000;display:block;cursor:pointer;}
.menubox > span{width:100%;height:80px;display:block;position:absolute;text-align:center;}
.menubox > span.default-txt{top:0px;left:0px;}
.menubox > span.hover-txt{top:80px;left:0px;color:red;}

HTML

<div class="nav">
    <a class="menubox">
        <span class="default-txt">menu</span>
        <span class="hover-txt">menu</span>
    </a>
    <a class="menubox">
        <span class="default-txt">menu</span>
        <span class="hover-txt">menu</span>
    </a>
    <a class="menubox">
        <span class="default-txt">menu</span>
        <span class="hover-txt">menu</span>
    </a>
    <a class="menubox">
        <span class="default-txt">menu</span>
        <span class="hover-txt">menu</span>
    </a>
    <div class="clear"></div>
</div>

JQuery

$(document).ready(function(){
    $('.menubox').mouseenter(function(){            
        $(this).children('.default-txt').stop(true,true).animate({top:'-100px'});
        $(this).children('.hover-txt').stop(true,true).animate({top:'0px'});
    }).mouseleave(function(){
        $(this).children('.default-txt').stop(true,true).animate({top:'0px'});
        $(this).children('.hover-txt').stop(true,true).animate({top:'100px'});
    });
});

JSFiddle

Arbeits Demo

0
Rajnikant Kakadiya 7 Dez. 2013 im 05:48

Hier ist ein einfaches Beispiel: http://jsfiddle.net/qtdtL/. Beachten Sie, dass das Element mit der Animation für "oben" die Position: fest hat.

$("nav").click(function() {
    var el = $(this);
    var elTop = el.position().top == 0 ? "-70px" : "0";
    el.animate({top: elTop});
});
0
user3075664 7 Dez. 2013 im 04:37

Grundsätzlich fügen Sie hinzu

div
{
 transition: all 0.5s ease;
-webkit-transition: all 0.5s ease; /* Safari */
}

Die erste Eigenschaft gibt an, welche Art von Änderungen bei Änderungen animiert werden sollen. Die zweite Eigenschaft gibt an, wie lange es dauern soll, und die dritte Eigenschaft gibt an. Außerdem gibt es eine vierte Eigenschaft, um eine Verzögerung zu erzielen, wenn dies gewünscht wird

0
Breezer 7 Dez. 2013 im 04:38