Pracuję na temat moich projektów studenckich i jestem nowym jQuery, dla projektu muszę użyć jQuery, aby zwiększyć kilka funkcji i nauczyłem się wiele do przeprowadzenia podstawowych zadań, ale utknąłem coś bardzo mylącego.

Jeden moje skrypty faktycznie zmienia obraz kontenera Div w funkcji myszy, funkcja jest obecnie w porządku, ale sprawiają, że czuje się trochę piękna, chcę dodać przejście na fade, albo przez zanikanie funkcji zanikania lub przez animowany, ale nie mogę pracować z obu. Szukałem w Internecie, ale tutaj nie jestem w stanie odnosić te przykłady tutaj.

Chcę tylko wiedzieć, gdzie mogę wstawić zniknięcie w fade out lub animować funkcję w tym kodzie, aby dać mu efekt przejściowy:

$(document).ready(function () {
$(".thumb").hover(function () {
    var dummyImg = $(this).attr("alt");
    $(this).attr("alt", $(this).attr("src"));
    $(this).attr("src", dummyImg);
}, function () {
    var dummyImg = $(this).attr("src");
    $(this).attr("src", $(this).attr("alt"));
    $(this).attr("alt", dummyImg);
});
});

Dziękuję Ci!

0
Maven 30 lipiec 2012, 02:51

4 odpowiedzi

Najlepsza odpowiedź

Chcesz uzyskać dostęp do funkcji funkcji Callback z funkcji Fadein i Fadeout, umożliwi to wprowadzenie zmian w obrazie SRC i co nie. wyglądałoby to coś takiego ->

$(document).ready(function () {
  $(".thumb").hover(function () {
    var dummyImg = $(this).attr("alt");
    $(this).fadeOut('slow', function(){
      //this is now the callback.
      $(this).attr("alt", $(this).attr("src"));
      $(this).attr("src", dummyImg);
      $(this).fadeIn('slow');
    });
  }, function () {
    var dummyImg = $(this).attr("src");
    $(this).fadeOut('slow', function(){
      //this is now the callback.
      $(this).attr("src", $(this).attr("alt"));
      $(this).attr("alt", dummyImg);
      $(this).fadeIn('slow');   
    });
  });
});
3
Ohgodwhy 29 lipiec 2012, 23:01

Maven,

Czy myślałeś o użyciu CSS Webkit? Ten, więc artykuł przechodzi w szczegóły dla obrazów krzyżowych - w różnych stawkach. CSS WebKit Transition - Zniknij powoli niż zanikaj w

Możesz także skorzystać z podstawowego zdarzenia, aby zanikać / zniknąć obraz. Ta jQuery / jsfiddle, więc artykuł używa obiektu this: jQuery Fadeout na Hover.

Podstawowa struktura znikania / zniknąca z Dokumentacji JSFiddle.net jest następująca:

$('#show').hover(function() {
    $(this).stop(true).fadeTo("slow", 0);
}, function() {
    $(this).stop(true).fadeTo("slow", 1);
});

~ Jol.

1
Community 23 maj 2017, 10:24

Osobiście, warstowałbym dwa obrazy (CSS), więc wersja non-hover jest normalnie na górze. Następnie w funkcji HOVER dodaj $ (to) .fadeout ("fast"), dzięki czemu wyświetlany jest podstawowy obraz.

1
jbehren 29 lipiec 2012, 22:57

http://jsfiddle.net/xm2be/13/ Istnieje przykład, jak to zrobić. Ofcourse, możesz ustawić długość efektu zanikania, umieszczając pewną liczbę wsporników. Do egzaminu .Fadoggle (5000) będzie miał 5 sekund.

1
Miljan Puzović 29 lipiec 2012, 23:38