• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

jquery javascript Problem fadeto und addclass

meck373

meck373

Neues Mitglied
Hallo,

ich glaube nicht, dass das Problem kompliziert ist, aber ich lerne gerade, somit bin ich noch Anfänger :(

was mache ich falsch?

Was ich machen will, ist glaube ich klar :)

hiervor steht auch schon funktionierender javascript.....

jQuery (document).ready(function() {
jQuery ('div.mov').mouseover(function(){
jQuery ('div.mov')
.not(this)
.removeClass()
.fadeTo('slow',0.2).addClass('mo')
;}) .mouseout(function(){
jQuery ('div.mo')
.removeClass()
.addClass('mov');
});
});
</script>


Danke schon mal!!!
 
Willkommen im Forum.

Ich habe ehrlichgesagt keine Ahnung, was du genau machen willst. Komplette Beispiele wären zudem gut. Ich habe es mal probiert:

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('div.mov').mouseover(function(){
        jQuery('div.mov')
            .not(this)
            .removeClass('mov')
            .fadeTo('slow',0.2).addClass('mo')
    ;})
    .mouseout(function(){
        jQuery('div.mo')
            .removeClass()
            .addClass('mov');
    });
}); 

        </script>
        <style type="text/css">

.mo {
    background-color: yellow;
}

.mov {
    background-color: red;
}

        </style>
    </head>

    <body>
        <div class="mov">test</div>
        <div class="mov">test</div>
        <div class="mov">test</div>
        <div class="mov">test</div>
        <div class="mov">test</div>
    </body>

</html>
 
Ok, dann versuche ich es besser zu machen.

Ich möchte mit dem mousezeiger auf ein bild gehen und alle anderen bilder wechseln in eine andere Klasse( grau). Damit das nicht so hin und her springt, wenn man darüber geht, wollte ich einen fade ( zwischen den 2 Klassen) machen.
Der fade soll eigentlich sowohl bei mouseover als auch beim mouseout passieren.

Ich hoffe es ist verständlich, was ich machen will :)

Danke
 
Ausgangsfarbe: Gelb
Highlightfarbe: Rot

- Bei Highlight eines Elements sollen alle anderen Elemente nach Grau faden.
- Bei Verlassen des Containers sollen alle Hintergrundfarben wieder auf Gelb gesetzt werden.

Problem: Ich habe gerade keine Ahnung, wie das mouseout-Event von .container nur dann ausgelöst werden kann, wenn .container tatsächlich verlassen wird.

Weiß das jemand?

Edit:

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant
Zum Vergrößern anklicken....

-- http://api.jquery.com/mouseleave/

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function() {
                jQuery('div.xy').mouseover(function(){
                    $(this).stop().removeClass('mo').addClass('mov').fadeTo('slow', 1.0);

                    jQuery('div.xy')
                        .not(this)
                        .stop()
                        .fadeTo('slow',0.2, function(){
                            $(this).removeClass('mov').addClass('mo');
                        });
                });

                $('.container').mouseleave(function () {
                    jQuery('div.xy')
                        .stop()
                        .removeClass('mov')
                        .removeClass('mo')
                        .fadeTo('slow',1.0);
                });
            });
        </script>
        <style type="text/css">
            .xy  { background-color: yellow; }
            .mo  { background-color: gray; }
            .mov { background-color: red; }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="xy">test 1</div>
            <div class="xy">test 2</div>
            <div class="xy">test 3</div>
            <div class="xy">test 4</div>
            <div class="xy">test 5</div>
        </div>
    </body>

</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben