+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Jquery proste przenikanie obrazków (/thread-jquery-proste-przenikanie-obrazkow)
Jquery proste przenikanie obrazków - Witek76 - 14-05-2013
Witam!
Znalazłem na stronie prosty przykład przenikania obrazków http://css-tricks.com/snippets/jquery/fade-image-into-another-image/ niestety niewiem jak go uruchomić - próbowałem tak jak poniżej ale (zupełny laik Jquery) tak niedziała- cos jest nie tak -hmm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$("#kitten").hover(function(){
$(this).find("images/kitten2.jpg").fadeOut();
}, function() {
$(this).find("images/kitten3.jpg").fadeIn();
});
</script>
</head>
<body>
<div id="kitten">
<img src="images/kitten.jpg" alt="Kitten" />
</div>
</body>
</html>
za pomoc z góry dziękuje,
pozdrawiam,
RE: Jquery proste przenikanie obrazków - prawdziwypiotrek - 14-05-2013
Tutaj kaleczysz kod...
Kod:
$(this).find("images/kitten2.jpg")Metodą find możesz znaleźć element, a nie atrybut jakiegoś elementu.
Powinieneś znaleźć element img o danym src, czyli:
Kod:
$(this).find("img[src=images/kitten2.jpg]")Ponadto w takich pytaniach powinieneś wystawiać działający kod - łatwiej zrozumieć o co chodzi
Drugi obrazek to jak rozumiem tło tego diva. Nie rozumiem po co szukasz jakiegoś "kitten3" w tej sytuacji 
Zadanie domowe
Zrób przenikanie obrazków bez użycia tła, czyli html wygląda tak:
Kod:
<div id="kotek">
<img src="kotek.jpg" alt="kotek"/>
<img src="kotek2.jpg" alt="kotek"/>
</div>RE: Jquery proste przenikanie obrazków - Kartofelek - 14-05-2013
??????????????????????????
a po co tak? Można spokojnie za pomocą css. Działa to lepiej i płynniej
Kod:
<div id="kotek" class="super-kocur">
<img src="kotek.jpg" alt="kotek"/>
<img src="kotek2.jpg" alt="kotek"/>
</div>
<style type="text/css">
.super-kocur {position:relative; width:200px; height:200px;}
.super-kocur img {position:absolute; top:0; left:0; opacity:1; -moz-transition:0.5s; -webkit-transition:0.5s; transition:0.5s;}
.super-kocur:hover img:last-child {opacity:0;}
</style>