Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Efekt Click.
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Bureau
18.09.2012, 13:37:55
Witam.

Mam skrypcik, podstawowy, nie jestem jQuerowcem jeszcze znanym, ale cos tak kombinuje.

Kod
<script>
        $(".one").click(function() {
           $(".one").toggleClass("active", 300);
        });

        $(".max").click(function() {
            $(".circle").removeClass("left");
            $(".circle").removeClass("right");
            $(".circle").removeClass("bottom");
           $(".circle").toggleClass("top");
        });
        $(".min").click(function() {
           $(".circle").removeClass("left");
            $(".circle").removeClass("right");
            $(".circle").removeClass("top");
           $(".circle").toggleClass("bottom");
        });
        $(".prev").click(function() {
           $(".circle").removeClass("right");
            $(".circle").removeClass("top");
            $(".circle").removeClass("bottom");
           $(".circle").toggleClass("left");
        });
        $(".next").click(function() {
           $(".circle").removeClass("left");
            $(".circle").removeClass("top");
            $(".circle").removeClass("bottom");
           $(".circle").toggleClass("right");
        });
    </script>


Wyobraźcie sobie iPoda i po kliknieciu np. na pogłośnienie czy ściszenie od strony buttona pojawia się jakiś cień i zaraz znika.
Powyższy skrypt daje efekt pojawiania się stylu, dokładnie dodaje mi klase do innej klasy, ale ja chciałbym żeby to było coś na styl :active w html. Czyli chce kliknąć raz i styl pojawi się i zaraz zniknie i tak dalej w nieskończoność...

Problem w tym że klasa w którą klikam jest gdzie zagnieżdżona w klasie na której ma się zmieniac styl (w tym przypadku tylko 'box-shadow'.
Mógłbym to zrobić na pozycji absolutnej i display:none; ale wolałbym jQuery smile.gif

Pozdrawiam:)
Arcioch
18.09.2012, 13:48:31
Pokaż kod html i css jaki do tego masz a napiszę Ci to a potem wyjaśnię co jak robi wink.gif
Mała podpowiedz jeżeli chcesz zrobić aby coś Ci się pojawiało a po chwili znikało używasz funkcji delay() na przykład nadajesz klasę do elementu a potem ją automatycznie usuwasz.

[HTML] pobierz, plaintext 
  1. $('uchwyt_do_elementu').addClass('twoja_klasa').delay('czas').removeClass('dodana klasa');
[HTML] pobierz, plaintext


Bureau
18.09.2012, 13:59:36
Próbowałem z delay(), ale nie działa mi prawidłowo.

HTML:

Kod
<div class="circle active">
                            <!-- central logo -->
                            <div class="dribbleLogo"></div>
                            <!-- navigation -->
                            <!-- volume control -->
                            <a href="#">
                                <div class="volume max">
                                    <span></span>
                                    <span></span>
                                </div>
                            </a>
                            <a href="#">
                            <div class="volume min">
                                <span></span>
                            </div>
                            </a>
                            <!-- next/prev item -->
                            <div class="nextPlayPrev">
                                <a href="#">
                                    <div class="prev">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </div>
                                </a>
                                <a href="#">
                                <div class="playPause">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                </a>
                                <a href="#">
                                <div class="next">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                </a>
                            </div>
                        </div>


CSS:

Kod
.circle {
                position: absolute;
                left: 22px;
                top:20px;
                .square(174px);
                background:@white;
                .border-radius(90px);
                box-shadow: inset 2px 2px 20px 3px rgba(0,0,0,.2), inset -2px -2px 20px 3px rgba(0,0,0,.2), 1px 1px 5px 1px rgba(255,255,255,.2), -1px -1px 5px 1px rgba(255,255,255,.2);
                border: 1px solid rgba(0,0,0,.5);
                &.active {
                    &.top {
                        box-shadow: inset 2px 2px 20px 3px rgba(0,0,0,.2), inset -2px -2px 20px 3px rgba(0,0,0,.2), 1px 1px 5px 1px rgba(255,255,255,.2), -1px -1px 5px 1px rgba(255,255,255,.2), inset 0 3px 1px 2px rgba(0,0,0,.2);
                    }
                    &.right {
                        box-shadow: inset 2px 2px 20px 3px rgba(0,0,0,.2), inset -2px -2px 20px 3px rgba(0,0,0,.2), 1px 1px 5px 1px rgba(255,255,255,.2), -1px -1px 5px 1px rgba(255,255,255,.2), inset -3px 0 1px 2px rgba(0,0,0,.2);
                    }
                    &.bottom {
                        box-shadow: inset 2px 2px 20px 3px rgba(0,0,0,.2), inset -2px -2px 20px 3px rgba(0,0,0,.2), 1px 1px 5px 1px rgba(255,255,255,.2), -1px -1px 5px 1px rgba(255,255,255,.2), inset 0 -3px 1px 2px rgba(0,0,0,.2);
                    }
                    &.left {
                        box-shadow: inset 2px 2px 20px 3px rgba(0,0,0,.2), inset -2px -2px 20px 3px rgba(0,0,0,.2), 1px 1px 5px 1px rgba(255,255,255,.2), -1px -1px 5px 1px rgba(255,255,255,.2), inset 3px 0 1px 2px rgba(0,0,0,.2);
                    }
                }
                .dribbleLogo {
                    background: url("@{image-path}/dribble.png") rgba(222,99,158,1) no-repeat;
                    .square(105px);
                    position: absolute;
                    top:35px;
                    left:35px;
                    .border-radius(90px);
                    box-shadow: 6px 6px 20px 3px rgba(0,0,0,.2), -6px -6px 20px 3px rgba(0,0,0,.2);
                    border: 1px solid rgba(0,0,0,.3);
                }
                .volume {
                    position: absolute;
                    .square(15px);
                    &.max {
                        top: 15px;
                        left: 80px;
                    }
                    &.min {
                        bottom: 4px;
                        left: 80px;
                    }
                    span {
                        display: block;
                        .size(3px, 15px);
                        .border-radius(5px);
                        background: rgba(178,180,184,1);
                        box-shadow: 0 1px 0 0 rgba(255,255,255,1);
                        &+span {
                            .rotate(90deg);
                            -webkit-transform-origin:60% 10%;
                            -moz-transform-origin:60% 10%;
                            -o-transform-origin:60% 10%;
                            box-shadow: 1px 0 0 0 rgba(255,255,255,1);
                        }
                    }
                }
                .nextPlayPrev {
                    a {
                        .prev {
                            position: absolute;
                            top: 80px;
                            left:10px;
                            span {
                                position: absolute;
                                display: block;
                                .size(12px, 2px);
                                background: rgba(178,180,184,1);
                                &+span {
                                    .size(0, 0);
                                    left:3px;
                                    border-right:7px solid rgba(178,180,184,1);
                                    border-top: 7px solid transparent;
                                    border-bottom: 7px solid transparent;
                                    background: none;
                                    &+span {
                                        left:10px;
                                    }
                                }
                            }
                        }
                        .next {
                            position: absolute;
                            top:80px;
                            right:10px;
                            span {
                                position: absolute;
                                display: block;
                                .size(12px, 2px);
                                background: rgba(178,180,184,1);
                                right:-3px;
                                &+span {
                                    .size(0, 0);
                                    border-left:7px solid rgba(178,180,184,1);
                                    border-top: 7px solid transparent;
                                    border-bottom: 7px solid transparent;
                                    background: none;
                                    right: 0;
                                    &+span {
                                        right:7px;
                                    }
                                }
                            }
                        }
                        .playPause {
                            position: absolute;
                            top:76px;
                            left: 67px;
                            span {
                                position: absolute;
                                display: block;
                                .size(0,0);
                                border-left:15px solid rgba(191,192,196,1);
                                border-top: 10px solid transparent;
                                border-bottom: 10px solid transparent;
                                &+span {
                                    .size(19px, 6px);
                                    background: transparent;
                                    border-top: 0;
                                    border-bottom: 0;
                                    border-left: 4px solid rgba(191,192,196,1);
                                    border-right: 4px solid rgba(191,192,196,1);
                                    left:25px;
                                }
                            }
                        }
                    }
                }
            }
Arcioch
18.09.2012, 18:34:10
Hmm faktycznie delay() nie działa ciekawi mnie tylko czemu. Nie lubie takiego pisania css bo dla mnie jest on troszkę nieczytelny ale nie ważne. Napisałem coś takiego i chyba działa wink.gif

[HTML] pobierz, plaintext 
  1. $(function(){
  2. 		$(".one").click(function() {
  3.            $(".one").toggleClass("active", 300);
  4.         });
  5.  
  6.         $(".max").click(function() {
  7.             $(".circle").removeClass("left");
  8.             $(".circle").removeClass("right");
  9.             $(".circle").removeClass("bottom");
  10.            $(".circle").toggleClass("top");
  11. 		   remove_last_class();
  12.         });
  13.  
  14.  
  15.         $(".min").click(function() {
  16.            $(".circle").removeClass("left");
  17.             $(".circle").removeClass("right");
  18.             $(".circle").removeClass("top");
  19.            $(".circle").toggleClass("bottom");
  20. 			remove_last_class();
  21.  
  22.         });
  23.  
  24.  
  25.         $(".prev").click(function() {
  26.            $(".circle").removeClass("right");
  27.             $(".circle").removeClass("top");
  28.             $(".circle").removeClass("bottom");
  29.            $(".circle").toggleClass("left");
  30. 		   remove_last_class();
  31.         });
  32.  
  33.         $(".next").click(function() {
  34.            $(".circle").removeClass("left");
  35.             $(".circle").removeClass("top");
  36.             $(".circle").removeClass("bottom");
  37.            $(".circle").toggleClass("right");
  38. 		   remove_last_class();
  39.         });
  40.  
  41. 		function remove_last_class(){
  42. 			var last_class = $(".circle").attr('class').split(/\s+/).pop();
  43. 			if(last_class == 'bottom' || last_class == 'top' || last_class == 'left' || last_class == 'right'){
  44. 				setTimeout(function(){
  45. 	                 $(".circle").removeClass(last_class);
  46. 	            }, 80);
  47. 			}
  48. 		};
  49. 	});
[HTML] pobierz, plaintext


Spróbuj jak nie będzie to dla Ciebie optymalne to przerobie tego css i htmla i napisze to bardziej optymalnie wink.gif
Bureau
19.09.2012, 08:25:04
Jesteś wielki, działa!

Struktura CSSa niestety pisana jest w LESS'ie więc jest nieczytelna trochę smile.gif

Mam jeszcze takie małe pytanko. Czy da się dopisac jakoś do tego aby po przytrzymaniu klawisza myszki efekt też działał ? smile.gif Dużo z tym roboty będzie ? smile.gif

Dzięki wielkie za pomoc!
Pozdrawiam!

Uporałem się z tym z pomocą pewnej osoby.

Kod przedstawia się następująco:
Kod
// add class for clicked button
$(".max").mousedown(function() {
    $(".circle").addClass("top");
});
$(".prev").mousedown(function() {
    $(".circle").addClass("left");
});
$(".next").mousedown(function() {
    $(".circle").addClass("right");
});
$(".min").mousedown(function() {
    $(".circle").addClass("bottom");
});

// clear all pushed button for ipod
$(document).mouseup(function() {
    $(".circle").removeClass("top");
    $(".circle").removeClass("left");
    $(".circle").removeClass("right");
    $(".circle").removeClass("bottom");
});
$(document).mousemove(function() {
    $(".circle").removeClass("top");
    $(".circle").removeClass("left");
    $(".circle").removeClass("right");
    $(".circle").removeClass("bottom");
});
// top slide button
$(".one").click(function() {
    $(".one").toggleClass("active", 300);
});


Może komuś się przyda smile.gif Pozdrawiam!
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.