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

Einblenden und Ausblenden

P

pepesan

Neues Mitglied
Hallo,

Ich habe ein Menu erstellt welches wie ein Schachbrett aussieht.
HTML: 
div id="navwrap">
    <div class="container ps_wrap <?php echo $containerPosition ?>">
        <div class="row ps_nav">
            <div class="inner">    
                <div class="ps_logo">
                    <h1>Droege<br>Immobillien</h1>
                </div>
                <div class="cube home">
                    <div class="front">
                        <a href="#" class="easy"><span>01</span> Start</a>
                    </div>
                </div>
                <div class="nocube"></div>
                <div class="cube profil">
                    <div class="front">
                        <p><span>02</span> Profil</p>
                        <ul>
                        <li><a href=""><strong>Unternehmen & Kompetentenzen</strong></a></li>
                        <li><a href="">Referenzen</a></li>
                        <li><a href="">Dreoege Immobilien Bewerten</a></li>
                        </ul>
                    </div>
                </div>
                <div class="nocube"></div>
                <div class="nocube"></div>
                <div class="cube leistungen">
                    <div class="front"><p><span>03</span> Leistungen</p>
                        <ul>
                        <li><a href=""><strong>Philsophie</a></li></strong>
                        <li><a href="">Etw-Verkauf & Vermietung</a></li>
                        <li><a href="">Entwicklungs-Geschäft</a></li>
                        </ul>
                    </div>
                </div>
                <div class="nocube"></div>
                <div class="cube angebot">
                    <div class="front"><p><span>04</span> Angebot</p>
                        <ul>
                        <li><a href=""><strong>Kurzübersicht</a></li></strong>
                        <li><a href="">Mieten</a></li>
                        <li><a href="">Kaufen</a></li>
                        <li><a href="">Vormerken</a></li>
                        </ul>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="cube service">
                    <div class="front"><p><span>04</span> Service</p>
                        <ul>
                        <li><a href=""><strong>Immotrends</a></li></strong>
                        <li><a href="">Tipp & Lohn</a></li>
                        <li><a href="">Download</a></li>
                        <li><a href="">Gloassar</a></li>
                        </ul>
                    </div>
                </div>
                <div class="nocube"></div>
                <div class="cube kontakt">
                    <div class="front">
                        <a href="" class="easy"><span>06</span> Kontakt</a>
                    </div>
                </div>
                <div class="nocube"></div>
Code: 
.ps_nav{width: 960px;height: 482px;}
.ps_wrap{background: url(../images/menu/header_bg.jpg) no-repeat;margin: 0 auto;height: 482px;border: none;float: none;}

.ps_logo{float: left;background: #adb319 url(../images/logo.png) no-repeat 15px 15px; width: 320px; height: 318px;border: 0;-moz-opacity: 0.90;-webkit-opacity: 0.90;-khtml-opacity: 0.90;opacity: 0.90;filter:alpha(opacity=90);}
.ps_logo h1{text-transform: uppercase; margin: 240px 0 0 15px; color:#fff;font-weight: normal; letter-spacing: 0;}

a{text-decoration:none;text-transform: uppercase;color: #000!important;}

.cube{float:left;width: 158px; height: 158px;color: white;position: relative;}
 .cube p{margin: 0;padding:100px 0 0 15px;text-transform: uppercase;position: relative;z-index: 200;}
 .cube p span,.cube a.easy span  {font-size: 300%;}
 .cube a.easy{position: relative;top:100px;padding: 0 0 0 15px;color:#fff!important;}

 
.cube .front{float:left;width: 158px;height: 158px;background: #adb319;-moz-opacity: 0.75;-khtml-opacity: 0.75;opacity: 0.75;filter:alpha(opacity=75);}
.front ul{margin:0;padding:50px 0 0 18px;list-style: none;width: 142px; height: 109px;background: #f7fafa;position:relative;}
.bg{margin:0;display: block;width: 158px; height: 159px;background: #f7fafa;position:relative;top: 160px;}
.bg:hover a{color: #000!important;}
.front a:hover{font-weight: bold;}

.nocube{float:left;width: 160px; height: 160px;}
.home{margin-left:1px;} 
.profil{float:left;padding-left: 1px;}
.leistungen{margin-top: -0.8px;padding: 0.2px 1px 0.5px 0;}
.angebot{margin: -1px 0 0 1px;padding: 0 2px 0.5px 0;}
.service{margin: -1px 0 0 -2px;;padding: 0 2px 1px 2px;}
.kontakt{margin: -1px 0 0 1px;padding: 0 0 1px;float:left;width: 158px; height: 158px;}

.home:hover,.kontakt:hover{text-decoration: none;}

dazu kommt diese Jquery code
Code: 
jQuery(document).ready(function(){
    var front = jQuery('.front');
    
    front.children('ul').hide();
    front.mouseover(function() {
    jQuery(this).children("p").css("color","#000").animate( {"top": "-100px"}, 750, "swing");    
    jQuery(this).children("ul").show().animate( {"top": "-154px"}, 750, "swing")
    ,function() {
            var time = 50; 
            var fade_out_function = function() {
                    jQuery(this).children("p").css("color","#fff").animate({"top": "100px"}, 750, "swing",function(){
                    jQuery(this).children('ul:visible').animate( {"top": "0px"}, 750, "swing").hide();
                 }); 
                 }
            var timeout = window.setTimeout(fade_out_function, time);
            front.mouseover(function(){
                window.clearTimeout(timeout);
            },
        function() {
            timeout = window.setTimeout(fade_out_function, time);
        });
       };
    });
    
    front.hover(function() {
    jQuery(this).children("a.easy").wrapAll('<span class="bg"></span');
    jQuery(this).children(".bg").animate( {"top": "0px"}, 750, "swing");
    jQuery(".bg").children("a.easy").css("color","#000").animate({"top": "0px"}, 750, "swing");
    });    

    
});

Mein Problem ist das das einblenden funktioniert aber das ausblenden nicht.
Was muss ich tun ?
 
hallo,

ah,

zwei möglichkeiten.

entweder verschiebst front.children('ul').hide(); auch in die funktion ein zeile tiefer, das vor jeden alle zu slieden
oder
Braust ein zweite funktion, anstelle f
ront.mouseover(function() {
Zum Vergrößern anklicken....
machst
front.mousedown(function() {
Zum Vergrößern anklicken....
und läst die halt beim verlasen zu sliden.

denke mal das erste ist die schnelle lösung und das zweite die richtige.

Cheffchen
 
Danke schonmal.
Das front.children('ul').hide(); eine Zeile in die Funktion zu machen bringt nix da dann alle zu gehen und ausserdem anschließend der Einblend effect also das von unter reinschieben nicht mehr geht.
Wie mache ich das denn mit der 2 Möglichkeit.? Aber doch nicht mit mousedown. ich will ja das wenn man das Quadrat wieder verlässt das es wieder nach unten schiebt
 
Indem du dein Script radikal vereinfachst und drei Eventlistener setzt, je einen für mouseover, mousedown und mouseout. Dabei reicht es völlig aus, in die Callbacks erst einmal ein console.log() zu setzen. Funktioniert soweit alles, kannst du das Script schrittweise bis zum momentanen Stand ausbauen.
 
Ok - ich habe das script radikal vereinfacht. Mousedown brauche ich nicht.
Ich habe nun folgenden Code.
Code: 
jQuery(document).ready(function(){
    var front = jQuery('.front');
    
    front.mouseover(function() {
        jQuery(this).children("p").css("color","#000").animate( {"top": "-100px"}, 750, "swing");    
        jQuery(this).stop().children("ul").show("slow").animate( {"top": "-154px"}, 750, "swing"),function(){
            
        };
    });
    front.mouseout(function() {
        jQuery(this).children("p").css("color","#fff").animate( {"top": "0px"}, 750, "swing");    
        jQuery(this).children("ul").animate( {"top": "6px"}, 750, "swing"),function(){
            jQuery(this).children("ul").hide();
        };
    });
});
Ich habe nun das Problem das sich solange ich mit der Maus draufstehe und auch eine Zeitlang danach wenn die maus schon weg ist der überblendeffect sich immer wiederholt.
Also einblenden, ausblenden, einblenden .... ich möchte aber :
Mouseover = einblenden und eingeblendet bleiben
Mouseout = ausblenden und ausgeblendet beleiben

Wie mach ich das ?
 
Hmm, also auf Anhieb sehe ich zumindest keinen Fehler. Um das Problem zu lösen, müsste ich allerdings dein Script nachbauen und damit experimentieren, wozu ich jetzt aber ehrlich gesagt keine Lust habe. Deshalb an dieser Stelle ein paar Anmerkungen bezüglich dessen, wonach ich schauen würde.

Die jeweils erste Zeile im mouseover/mouseout sollte ok sein. Wobei ich die Werte für Verschiebungen lieber auf -=100px und +=100px setzen würde.

Das hier irritiert mich allerdings.
Code: 
    front.mouseover(function() {
        ....
        jQuery(this).stop().children("ul").show("slow").animate( {"top": "-154px"}, 750, "swing"),function(){
            
        };
    });

Du setzt hier auf $('.front') ein stopAnimation, obwohl dieses Element gar nicht animiert wurde, sondern der darin liegende <p> Container.
 
so,
nach ein wenig tüftelei habe ich nun einen funktionierenden Code geschaffen:
Code: 
jQuery(document).ready(function(){
    var front = jQuery('.front');
    var link = front.children('.bg p').html();
        front.hover(function() {
        jQuery(this).children("p").css("color","#000").animate({"top": "-106px"}, 750, "swing");    
        jQuery(this).children("ul").show("slow").animate({"top": "-160px"}, 750, "swing");
        jQuery(this).children(".bg").show("slow").animate( {"top": "-160px"}, 750, "swing")
        jQuery(this).children(".bg").parent('p').wrap('<a href="link"></a>')
        },function(){
            jQuery(this).children("p").css("color","#fff").animate({"top": "0px"}, 750, "swing");    
            jQuery(this).children("ul").animate({"top": "6px"}, 750, "swing");
            jQuery(this).children(".bg").animate( {"top": "6px"}, 750, "swing")
            ,function(){
                jQuery(this).children("ul").hide();
        };
        ;
    });
});
Jedoch habe ich noch eine Schwierigkeit.
HTML: 
<div class="cube home">
                    <div class="front"><!-- animiert mit nur p tag, hier soll das Hyperlink rein -->
                        <p><span>01</span> Start</p>
                        <span class="bg">
                            
                        </span>
                    </div>
                </div>
                <div class="nocube"></div><!-- nicht animiert -->
                <div class="cube profil"><!-- animiert mit Liste -->
                    <div class="front">
                        <p><span>02</span> Profil</p>
                        <ul>
                        <li><a href=""><strong>Unternehmen & Kompetentenzen</strong></a></li>
                        <li><a href="">Referenzen</a></li>
                        <li><a href="">Dreoege Immobilien Bewerten</a></li>
                        </ul>
                    </div>
                </div>
                <div class="nocube"></div>
Ich habe ja immer ein Quadrat was animiert ist ein anderes wieder nicht.
In einem animierten steht ein p und darunter eine Liste mit Links, in einem anderen habe ich nur ein p.
HTML: 
<div class="front">
                        <p><span>01</span> Start</p>
                        <span class="bg">
                            
                        </span>
                    </div>
Ich möchte jetzt erreichen das wenn man mit der Maus auf diesem Quadrat steht der p von einem a tag umantelt wird. Dazu muss ich es irgendwie schaffen ein Ziellink zu vergeben.
Ich habe nähmlich 2 von diesen Quadraten.
Dazu hatte ich mir folgendes überglegt.
Erst:
Code: 
var link = front.children('.bg p').html();
Dann:
Code: 
jQuery(this).children(".bg").parent('p').wrap('<a href="link"></a>')

Leider funktioniert das nicht.
Jemand ne Idee ?
 
pepesan schrieb:
so,

Ich möchte jetzt erreichen das wenn man mit der Maus auf diesem Quadrat steht der p von einem a tag umantelt wird. Dazu muss ich es irgendwie schaffen ein Ziellink zu vergeben.
Ich habe nähmlich 2 von diesen Quadraten.
Dazu hatte ich mir folgendes überglegt.
Erst:
Code: 
var link = front.children('.bg p').html();
Dann:
Code: 
jQuery(this).children(".bg").parent('p').wrap('<a href="link"></a>')

Leider funktioniert das nicht.
Jemand ne Idee ?
Zum Vergrößern anklicken....

Jetzt mal abgesehen davon, dass das keine Lösung ist, weil ein Blockelement nicht in einem Inline-Element gewraped werden darf: Was genau funktioniert nicht? Gibt die Konsole einen Fehler aus, wird der Wrap nicht ausgeführt? Ich finde dein Traversieren auch recht unübersichtlich. Warum verwendest du nicht find() und closest(), um mehrere Ebenen überspringen zu können und gibt den Eltern-/Kindelementen eindeutige Bezeicher (z.B. CSS-Klassen)?

Außerdem ist für Links nicht zwingend das <a>-Tag nötig. Man könnte auch so etwas schreiben:

HTML: 
<p class="foo" data-link="google.de">
    <span class="bar">Lauter Text</span
</p

ungetestet:
Code: 
$('.bar').on('click', function() {
    var myLink = $(this).closest('foo').attr('data-link');
    location.replace('http://' + myLink);
})
 
Super vielen Dank.
Mit:
Code: 
var link = jQuery(this).find('.bg').attr('data-link');
        location.replace('http://localhost' + link);
Erreiche ich genau das was ich will.
Jedoch springt er sofort auf den Link wenn ich mit der Maus draufgehe.
Wie kann ich erreichen das ähnlich wie bei einem a tag ein Mousover erscheint und erst bei click es weitergeht.
 
Indem du location.replace() an ein Click-Event bindest und für mouseover() eine andere Funktion definierst.
 
Code: 
var link = jQuery(this).find('.bg').attr('data-link');
        jQuery(this).children('.bg').click(function(){location.replace('http://localhost' + link);)};
so ?
das funktioniert leider nicht und das mit dem
und für mouseover() eine andere Funktion definierst.
Zum Vergrößern anklicken....
habe ich auch nicht recht verstanden.

Ich brauche nochmal hilfe bitte.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben