Avatar billede dennism Nybegynder
21. august 2009 - 16:00 Der er 9 kommentarer og
1 løsning

jQuery UI: Bounce effekt på mouseover?

Jeg har lavet en lille test side, som viser brugen af bounce effenten fra jQuery UI:
http://dennismadsen.com/uploads/jquery/

Jeg vil have, at effekten køres når mousen bevægser sig ind på det outer div. Men som I kan se, så gentager effekten sig. Hvordan kan det være og hvordan fixer jeg det?
Avatar billede w13 Novice
21. august 2009 - 16:10 #1
Hos mig hopper boksen kun én gang, når man holder musen over den outer div.

Men jeg bruger også Safari på Mac.
Avatar billede dennism Nybegynder
21. august 2009 - 16:24 #2
Ok, kan se det også fungerer i Chrome. Men i min IE8 og FF3 virker det desværre ikke :(
Avatar billede w13 Novice
21. august 2009 - 16:31 #3
Du skal nok lige indsætte en DOCTYPE, et HTML-, HEAD- og BODY-tag, før du kan regne med resultatet.

Hvis det stadig ikke virker bagefter, så prøv lige at rette:

<script type="text/javascript">
$(function(){
    $("#outerDiv").hover(function(event){
            $(this).effect("bounce",
            {
                distance: 5,
                times: 2,
                duration: 200               
            },350);
        },null);
});
</script>

til:

<script type="text/javascript">
$(function(){
        alert('test');
    $("#outerDiv").hover(function(event){
            $(this).effect("bounce",
            {
                distance: 5,
                times: 2,
                duration: 200               
            },350);
        },null);
});
</script>

Så ser vi, om den udskriver "test" i en alert-boks flere gange eller kun én, når man holder musen over. Og det vil hjælpe os med at finde fejlen. =)
Avatar billede dennism Nybegynder
21. august 2009 - 16:40 #4
Det er et udklip fra et side jeg sidder og udvikler på - derfor tog jeg ikke doctype m.m. med over. Men har sat det ind nu.

Jeg har lavet en med en alert her:
http://www.dennismadsen.com/uploads/jquery/alert.html

Jeg havde også selv testet med en alert.
Avatar billede w13 Novice
21. august 2009 - 17:30 #5
Prøv at erstatte hover med mouseover.
Avatar billede dennism Nybegynder
21. august 2009 - 17:38 #6
Det ser ikke ud til at gøre nogen forskel i min FF:
http://www.dennismadsen.com/uploads/jquery/mouseover.html
Avatar billede w13 Novice
21. august 2009 - 17:46 #7
Hmm. Nej, den kan jeg sgu ikke lige greje. Men er heller ikke så godt hjemme i jQuery.
Avatar billede dennism Nybegynder
21. august 2009 - 23:35 #8
Ingen jQuery-folk der kan hjælpe her? :)
Avatar billede dennism Nybegynder
23. august 2009 - 15:09 #9
Jeg fandt en løsning, som virker - men om det kan laves smartere ved jeg ikke :)

$(".frontpageBox").hover(function(event){
    if (!$(this).attr("effectRunning")) {
                $(this).attr("effectRunning",true).effect("bounce",
        {
            distance: 5,
            times: 2,
            duration: 200               
        },350);
    }
},function(event){
    $(this).removeAttr("effectRunning")
});

Jeg laver simpelthen en attribut som holder styr på, om en effekt er i gang. Først når der bliver lavet mouseout fjernes denne attribut - og effekten kan starte igen.
Avatar billede w13 Novice
23. august 2009 - 15:24 #10
Virker som en fin løsning. :)

Husk at oprette et svar, som du accepterer!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester