Witam.
Potrzebuje pomocy. Mianowicie chcę czasowo zawiesić działanie zdarzenia "click" na obiekcie, który jest przypisany w innej funkcji w innej czesci programu. Piszę więc:
.
.
if ("#menu"+i != id)
{
$("#menu4").die("click", prezentacja(a))
}
.
.
}
wczesniej jest
$('#menu'+i).click( function() { var a = "#"+this.id; prezentacja(a) });
neistety nie działa.
Dokumentacja się kłania: http://api.jquery.com/die/
Nie używałeś live to i die nie podziała. W linku powyżej masz napisane czego użyć.
czytałem to ale nie wszystko rozumiem.
w moim przypadku potrzebuję najpierw użyć die, a potem live..
w moim przypadku potrzebuję najpierw użyć die, a potem live..
Eeee.. Nie bardzo nadążam.
Jedyne co wymyśliłem, to że chcesz określić w kodzie elementy, na które live ma nie działać.
To po prostu dodaj im klasę np. no_live, a w selektorze wpisz np: #menu4:not(.no_live) - jeżeli element będzie miał tą klasę, to live nie zadziała, a jak mu w którymkolwiek momencie zdejmiesz tą klasę - to funkcja spod live się wykona.
Jeśli nie chcesz, żeby "najpierw" zdarzenie było podpięte, to... go nie podpinaj. Proste. Funkcję obsługi zdarzenia podepnij (poprzez live()) dopiero wtedy, gdy będzie potrzebna. Jeśli potem nie będzie potrzebna -- użyj .die().
BTW: ten kod:
$("#menu4").die("click", prezentacja(a));
Jest prawie na pewno błędny, chyba że prezentacja() to funkcja zwracająca funkcję -- i to dokładnie tę funkcję, którą dodałeś za pomocą .live(), a nie jakąś utworzoną na chybcika funkcję anonimową.
Musiałbyś dać więcej kontekstu. Link do strony, najlepiej. I dokładny opis problemu. A jak nie link, to paczkę ze stroną.
rozwiązałem problem przy pomocy unbind() . aczkolwiek live i die, przy kolejnej okazji sie zainteresuje szerzej..
a tak z cekawosci, nie chcąc tworzyć nowego tematu, bo pewnie i tak odpowiedza te same osoby. dlaczego w tym kodzie, nie działa funkcja anonimowa?
$(link).animate({ left : "100px", top : "100px" }, { easing: 'easeOutBack' }, 3000, function() { alert('aaa') } )
jedyny sposob jaki mi zadziałał to wywołanie w tamtym miejscu funkcji zdefiniowanej gdzie indziej
$(link).animate({ left : "100px", top : "100px" }, { easing: 'easeOutBack' }, 3000, { complete : przywroc(link) } )
Ech, sprawdzaj dokumentację!
http://api.jquery.com/animate/
Dopiero potem, gdy bardzo dokładnie sprawdzisz, czy dokumentacja przewiduje takie wywołanie, jak masz, odezwij się na forum. Marnujesz swój i nasz czas!
Zapewne chciałeś użyć wersji metody .animate() opisanej tak:
.animate( properties [, duration] [, easing] [, complete] )
Porównaj to z Twoim wywołaniem... 3000 u Ciebie to parametr duration. Powinien być drugi, u Ciebie jest trzeci. Z kolei parametr z rodzajem przejścia (easing) u Ciebie jest jakimś obiektem z kluczem { easing: "cośtam"}, a powinien być po prostu stringiem, tj. "cośtam". Jest to jasno opisane w dokumentacji!
Drugi przykład, który podałeś, też jest zły. I też nie działa tak, jakbyś zapewne chciał. Tam po prostu NATYCHMIAST wywołujesz funkcję przywroc() z parametrem link. A chciałeś zapewne, by jQuery wywoływało ją za Ciebie po skończeniu animacji.
Sprwadzam, sprawdzam. Aczkolwiek jak widać, z różnym skutkiem to wychodzi..
Miałbym jeszcze jedno pytanie . Posiłkowałem się tym http://jqueryfordesigners.com/image-loading/ przy tworzeniu wlasnego loadera dla zdjęć. I chciałbym aby to wyglądało tak jak w tym przykładzie , stąd też analogiczne próby.. niestety u mnie nie pojawia się animowany gif, tylko Od razu wyświetla się właściwe zdjęcie. Wielokrotnie już zmieniałem ten kod i przestaje dostrzegać w nim cokolwiek.. Jakaś porada? W którym miejscu zrobiłem źle?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-2">
<meta name="Description" content="">
<meta name="Keywords" content="">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style type="text/css">
#calosc { }
#glowny { width: 800px; height: 550px; position: absolute; top: 150px; left: 100px; background-color: #EEAA00;}
#glowny img.loading {background: url(http://www.carestream.pl/WorkArea/images/application/loading_big.gif) no-repeat center center; width: 200px; height: 200px; border: 1px solid #ccc;}
#glowny > img {width: 200px; height: 200px; margin: 30px; border: 3px black groove; cursor: pointer;}
</style>
<script type="text/javascript">
function start() {
$('#link').click( function() {loadImage()} )
}
function loadImage() {
var sciezki = [
'http://3.bp.blogspot.com/_IYGc_MWwkfw/S_guqr7eDZI/AAAAAAAAA80/QOA_mCLOt5k/s1600/douc_langur_pygathrix_nemaeus__by_ucumari_from_flickr_cc-nc-nd.jpg',
'http://ericlondon.com/sites/all/themes/osx/images/background.jpg',
'http://img256.imageshack.us/img256/7955/narutoxsasukeyaoibyyoru.jpg'
]
for (var y=0; y < sciezki.length; y++)
{
var img = new Image();
$(img).load(function () {
$('#glowny').removeClass('loading').append(this);
$(this).fadeIn(1000);
}).attr('src', sciezki[y]);
$(img).click(function() { alert('klik') })
}
}
$(document).ready(start);
</script>
</head>
<body>
<div id="calosc">
<div id="link">KLIK</link>
<div id="glowny"></div>
</div>
</body>
</html>
w cssach masz: #glowny img.loading, w javascripcie: $('#glowny').removeClass('loading').
Poza tym nigdy i nigdzie nie tworzysz elementu img z klasą loading (nie ma nic w javascripcie ani w htmlu) - to nie dziwne, że się nie pojawia.
Genealnie to masz NIC, potem tworzysz nowy obrazek (pod zmienną, nie w dokumencie), nieudolnie (bo nieskutecznie, nawet gdyby była ta klasa) usuwasz mu klasę loading, której nigdy nie miał, potem wstawiasz do dokumentu wraz z odpowiednim src. Wtf?
Zastanawiasz się nad tym, co w ogóle robisz?
No i jeszcze efektu fadeIn nie mozesz uzyc na tym samym elemencie w którym masz loader - bo loader też w pewnym momencie Ci "zaniknie". Rób kontener, jako tło kontenera ustawiaj loader, a w środku potem wstawiaj obraz i go pokazuj.
Poprawione tu i tam. Moge powiedzieć, że jestem zadowolony z efektu wizualnego, wygląda to tak jak tego chciałem. Aczkolwiek zamieszczam kod i czekam na krytyke :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-2">
<meta name="Description" content="">
<meta name="Keywords" content="">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style type="text/css">
* { margin : 0 auto; padding : 0; background-repeat : no-repeat; }
#glowny { width: 800px; height: 550px; position: absolute; top: 150px; left: 100px; background-color: #EEAA00;}
div.loading {background: url(http://www.carestream.pl/WorkArea/images/application/loading_big.gif) no-repeat center center; width: 200px; height: 200px; margin: 30px; float: left; border: 3px black groove; cursor: pointer;}
.loading img { width: 200px; height: 200px; cursor: pointer;}
</style>
<script type="text/javascript">
function start() {
$('#link').click( function() {loadImage()} )
}
var div = []
var img = []
function loadImage() {
var sciezki = [
'http://www.net-kit.com/wp-content/uploads/2010/03/flashy-slideshow-jquery.jpg',
'http://4.bp.blogspot.com/-aLA3HyuoHng/TiVUAO_cXYI/AAAAAAAAPOA/QBTGOMahznw/s1600/obrazki%2Bz%2Bp%25C4%2599draka%2B1163.jpg',
'http://tympanus.net/codrops/wp-content/uploads/2011/06/GridNavigationEffects.jpg',
'http://discuss.zoho.com/getCustomFile.do?fileId=14737000001890331&forumGroupId=14737000000003003'
]
var x = 0;
for (var y=0; y < sciezki.length; y++)
{
img[y] = new Image();
div[y] = $(document.createElement('div')).addClass('loading').appendTo('#glowny');
$(img[y]).load(function () {
$(div[x]).append(this);
$(this).hide();
$(this).delay(1000).fadeIn(1000)
x++;
}).attr( 'src', sciezki[y])
$(img).click(function() { alert('klik') })
}
}
$(document).ready(start);
</script>
</head>
<body>
<div id="calosc">
<div id="link">KLIK</div>
<div id="glowny"></div>
</div>
</body>
</html>