Wątek przeniesiony 2016-03-01 20:12 z Webmastering przez dzek69.

Stworzeniem zdarzenia dla buttona

0

Witam,

uczę się biblioteki javyscript jquery i nie wiem jak zrobic jedna rzecz mianowicie.Wiem ze zdarzenia takie jak fadeToggle ,slideToggle tworzą animacje w dwie strony znaczy pokazują i ukrywają:)

Ja chciałbym stworzyc animacje po kliknięciu gdzie z ukrytego elementu w html majacy styl w css display none pokazdywal mi sie fadeIn() a ukrywał slideUp.Chodzi mi o połączenie dwóch zdarzeń po dwóch kliknieciach w jeden button:)

stworzyłem dwa kody ale mi nie działają:)oto one:)I teraz jakby ktoś mógł mnie naprowadzić.Wiem że kiedyś w Jquery bylo zdarzenie toggle jak click w ktorym mozna bylo zapisac wlasnie dwa różne zdarzenia ale niestety od jakiejś tam części tego nie ma już:)

moje nie działające skrypty:)

<div class="zakladkaFormularz">
	<button class="buttonFormularz">Button</button>
	<div class="contentFormularz">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde perspiciatis saepe quisquam nihil vero aliquam molestias autem consequuntur pariatur ab fugit, hic maxime quam, obcaecati quidem id alias minus ad!</div>
</div> 
.zakladkaFormularz{
	margin: 0 auto;
	bottom: 70px;}
.zakladkaFormularz button .buttonFormularz{}
.contentFormularz{
display: none;
	width: 300px;
	height: 300px;
	background: #fff;
	border:2px solid grey;
	border-radius:5px; 
	margin:0 auto;
	padding:15px 10px;
	margin-top: 20px;
	margin-bottom: 70px;
} 

1 skrypt javyscript

$('.zakladkaFormularz').find('button').click(function(){
		if($('.contentFormularz').not(':visible')){
		$('.contentFormularz').fadeIn('slow')}
		else($('.contentFormularz').is(':visible')){
		$('.contentFormularz').slideUp('slow');}
	}); 

2 skrypt javyscript

var klik=1
$('.buttonFormularz').click(function(){
	if(klik=1){
		$('.contentFormularz').fadeIn('slow');
		klik++}
		else if(klik=2)
		$('.contentFormularz').slideUp('slow');
	klik=1
	}); 

Niby to proste ale nie moge tego zrobić.Jestem początkujący i dopiero się uczę.Proszę o wyrozumiałość.Jeżeli coś źle nazwałem to tez sory :)

1
  1. Używaj poprawnego nazewnictwa. zdarzenia takie jak fadeToggle ,slideToggle --- to nie są zdarzenia - to są metody/funkcje.
  2. Naucz się javascriptu, zanim zaczniesz cokolwiek robić. else($('.contentFormularz').is(':visible')) --- to jest niepoprawny kod javascript który wywala błąd w konsoli i cały kod w ogóle się nie wykonuje.
  3. skrypt javyscript --- javascript, nie javyscript
  4. if(klik=1){ jest zdecydowana różnica pomiędzy = a == (oraz === w sumie też).

Generalnie można próbować jakoś Ci pomagać, ale do nawet krótkiego fragmentu kodu okazuje się, że błędów jest dużo więcej niż jeden (pierdółki typu tragiczna wydajność z powodu powtarzania wybieranie elementów pomijam). Wróć do podstaw. Podstaw-podstaw. W tym momencie za szybko wybiegasz do przodu i ciężko Ci będzie cokolwiek się nauczyć.

0

@dzek69 faktycznie w tej drugiej opcji nie dodałem nawiasów i jeszcze źle wykonałem if bo jedno równa się to jest przypisanie a nie porównanie elementu:D

prawidłowa postać będzie wygladała zatem tak:))

var klik=1
$('.buttonFormularz').click(function(){
    if(klik==1){
        $('.contentFormularz').fadeIn('slow');
        klik++}
        else if(klik==2){
        $('.contentFormularz').slideUp('slow');
    klik=1
    }}); 

u mnie teraz śmiga więc powinno być dobrze:))

w piewszym przykładzie dokonałem pewnej poprawki i wykonuje się do czasu pokazania elementu tylko nie wiem czemu .contentFormularz mi się nie chowa.

po dokonaniu poprawy wygląda to tak:)

$('.zakladkaFormularz').find('button').click(function(){
        if($('.contentFormularz').not(':visible')){
        $('.contentFormularz').fadeIn('slow')}
        else if($('.contentFormularz').is(':visible')){
        $('.contentFormularz').slideUp('slow');}
    }); 
2

po co w ogóle robisz konstrukcję

if (warunek) {
  // 1
}
else if (!warunek) {
  // 2
}

skoro równoznaczne, bardziej czytelne i wydajniejsze będzie

if (warunek) {
  // 1
}
else {
  // 2
}
0

faktycznie :)Tak bez sensu ten drugi warunek bo jeszcze jest else:)

a co do tego 1 przykladu to co mam źle?

Po poprawce wyglada tak ale nadal nie działa :(

$('.zakladkaFormularz').find('button').click(function(){
        if($('.contentFormularz').not(':visible')){
        $('.contentFormularz').fadeIn('slow')}
        else if($('.contentFormularz').is(':visible')){
        $('.contentFormularz').slideUp('slow');}
    });  

1 użytkowników online, w tym zalogowanych: 0, gości: 1