Anzeige

Element Fade in mit JQuery?

Element Fade in mit JQuery? | PSD-Tutorials.de

Erstellt von Blackdraft, 13.02.2010.

  1. Blackdraft

    Blackdraft Guest

    Element Fade in mit JQuery?
    Hallo zusammen,

    ich hab ein etwas größeres Problem und nach stundenlangem Googlen, ist dieses leider immer noch nicht gelöst.

    Folgendes:
    Ich habe mir eine horizontale Navigation in diesem Stil erstellt
    Gaya Design - Text with Moving Backgrounds

    So nun möchte ich, das wenn man die Maus über eines der Elemente zieht, dieses einfadet. Also im Prinzip von 0% Deckkraft auf 100%. Und wenn man den Mauszeiger wieder wegnimmt dann wieder unsichtbar wird.

    ich habe einige Beispielcodes im Internet gefunden, wie bsp. den hier:

    HTML:
    1. $(document).ready(function(){ // This sets the opacity of the thumbs to fade down to 60% when the page loads
    2.     $(".thumbs img").fadeTo("slow", 0.6);
    3.  
    4.     $(".thumbs img").hover(function(){
    5.         $(".thumbs img").fadeTo("slow", 1.0); // This sets the opacity to 100% on hover
    6.     },function(){
    7.         $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity back to 60% on mouseout
    8.     });
    9. });
    Die Klasse habe ich testweise mit einer meiner Klassen ausgetauscht. Also ".thumbs img" zu ".navihome"
    Leider klappt das überhaupt nicht. Manchmal blinkt dann der Eintrag manchmal auch nicht, ziemlich unwillkürlich.

    Ich hoffe einer hat eine Idee was an dem Quellcode falsch ist und wie ich diesen auf insgesamt fünf Elemente (menüpunkte) anwenden kann.

    Vielen dank im Voraus
     
    #1      
  2. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Element Fade in mit JQuery?
    AW: Element Fade in mit JQuery?

    ist das element um das es geht ein <a>? diese haben ja ihr default verhalten bei hover, das man per event.preventDefault() deaktivieren kann.

    vielleicht sicherer und eindeutiger mit $(this) auf das element bezug nehmen?

    Code (Text):
    1.  
    2.     $(".thumbs img").hover(function(e){
    3.         e.preventDefault();
    4.         $(this).fadeTo("slow", 1.0);
    5.     },function(e){
    6.         e.preventDefault();
    7.         $(this).fadeTo("slow", 0.6);
    8.     });
    9.  
    10.  
     
    #2      
  3. Blackdraft

    Blackdraft Guest

    Element Fade in mit JQuery?
    AW: Element Fade in mit JQuery?

    Hallo Sokie,
    danke für deine Antwort, leider scheint dein Code nicht zu funktionieren.

    Hier mal ein Auszug meiner HTML-Datei:

    HTML:
    1.  
    2. ...
    3. <script type="text/javascript" src="_js/jquery-1.3.2.min.js" ></script>
    4. <script type='text/javascript' src='_js/queryLoader.js'></script>
    5. <script type="text/javascript" src="_js/move-bg.js"></script>
    6. <script type="text/javascript" src="_js/hts.js" ></script>
    7. <script type="text/javascript" src="_js/jquery.easing.min.js"></script>
    8. <script type="text/javascript" src="_js/jquery.pagination.js" ></script>
    9. <script type="text/javascript" src="_js/jquery.lazyload.js" ></script>
    10. <script type="text/javascript" src="_js/jquery-ui.min.js"></script>
    11. <script type="text/javascript" src="_js/additionalscripts.js"></script>
    12. <script type="text/javascript" src="/langdir.js"></script>
    13.  
    14. <script type="text/javascript">
    15.      $(".navihome").hover(function(e){
    16.         e.preventDefault();
    17.         $(this).fadeTo("slow", 1.0);
    18.     },function(e){
    19.         e.preventDefault();
    20.         $(this).fadeTo("slow", 0.6);
    21.     });
    22.  
    23. <script type="text/javascript">
    24.         $(document).ready(function() {
    25.        
    26.             moveBgAround();
    27.        
    28.         });
    29.        
    30.         function moveBgAround() {
    31.             var x = Math.floor(Math.random()*401);
    32.             var y = Math.floor(Math.random()*401);
    33.            
    34.             var time = Math.floor(Math.random()*1001) + 2000;
    35.        
    36.             $('.navihome, .naviaboutme, .naviportfolio, .naviconnect, .naviblog').animate({
    37.                 backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
    38.             }, time, "swing", function() {
    39.                 moveBgAround();
    40.             });
    41.         }
    42.        
    43.     </script>
    44. ...
    45.  
    Hier der Part mit der Navigation:

    HTML:
    1. <div id="navigation">
    2.                
    3.     <ul>
    4. ...
    5.     <li class='navihome' style='background-image: url(images/pattern_2.jpg)'><a href="#home"><img src='images/home.png' alt='' /></a></li>
    6.     <li class='naviaboutme' style='background-image: url(images/pattern_2.jpg)'><a href="#kai"><img src='images/aboutme.png' alt='' /></a></li>
    7.     <li class='naviportfolio' style='background-image: url(images/pattern_2.jpg)'><a href="#portfolio"><img src='images/portfolio.png' alt='' /></a></li>
    8.     <li class='naviconnect' style='background-image: url(images/pattern_2.jpg)'><a href="#connect"><img src='images/connect.png' alt='' /></a></li>
    9.     <li class='naviblog' style='background-image: url(images/pattern_2.jpg)'><a href="http://www.blog.kaibrueckers.com"><img src='images/blog.png' alt='' /></a></li>
    10.   </ul>
    11.           </div>
    12. ...
    13.  
    Und hier der relevante CSS Teil:
    HTML:
    1.  
    2. ...
    3. #navigation {
    4.     position:fixed;
    5.     z-index:1300;
    6.     bottom: 0px;
    7.     left: 50%;
    8.     margin-left:-395px;
    9.     height: 30px;
    10.     float:left;
    11.     width:790px;
    12.     line-height:normal;
    13. }
    14.  
    15. #navigation ul {
    16.   margin:0;
    17.   padding:0;
    18.   list-style:none;
    19.   }
    20. #navigation li {
    21.   float:left;
    22.   margin:0;
    23.   padding:0;
    24.   }
    25.  
    26. .navihome {
    27.     background-image: url(pattern_2.jpg);
    28.     background-color: #FFFFFF;
    29.     width: 102px;
    30.     height: 20px;
    31.     float:left;
    32. }
    33.  
    34. .naviaboutme {
    35.     background-image: url(pattern_2.jpg);
    36.     background-color: #FFFFFF;
    37.     width: 189px;
    38.     height: 20px;
    39.     float:left;
    40. }
    41.  
    42. .naviportfolio {
    43.     background-image: url(pattern_2.jpg);
    44.     background-color: #FFFFFF;
    45.     width: 203px;
    46.     height: 20px;
    47.     float:left;
    48. }
    49.  
    50. .naviconnect {
    51.     background-image: url(pattern_2.jpg);
    52.     background-color: #FFFFFF;
    53.     width: 174px;
    54.     height: 20px;
    55.     float:left;
    56. }
    57.  
    58. .naviblog {
    59.     background-image: url(pattern_2.jpg);
    60.     background-color: #FFFFFF;
    61.     width: 95px;
    62.     height: 20px;
    63.     float:left;
    64. }
    65.  
    66. .scrollBg  img {
    67.     display: block;
    68. }
    69. ...
    70.  
    Und hier zur Veranschaulichung mal das Menü:

    [​IMG]

    Ich hoffe, dass nun etwas mehr Klarheit vorhanden ist...würde mich freuen wenn da einer durchblickt...
     
    #3      
  4. Blackdraft

    Blackdraft Guest

    Element Fade in mit JQuery?
    AW: Element Fade in mit JQuery?

    Hat keiner mehr eine Idee?
     
    #4      
  5. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Element Fade in mit JQuery?
    AW: Element Fade in mit JQuery?

    du musst den Teil innerhalb des
    Code (Text):
    1.  
    2. $(document).ready(function() {
    3.   // zb. hier
    4.   moveBgAround();
    5. }
    notieren.
     
    #5      
  6. Blackdraft

    Blackdraft Guest

    Element Fade in mit JQuery?
    AW: Element Fade in mit JQuery?

    Tut mir leid, auch das scheint nicht zu funktionieren

    HTML:
    1. <script type="text/javascript">
    2.         $(document).ready(function() {
    3.            $(".navihome").hover(function(e){
    4.         e.preventDefault();
    5.         $(this).fadeTo("slow", 1.0);
    6.     },function(e){
    7.         e.preventDefault();
    8.         $(this).fadeTo("slow", 0.1);
    9.     });
    10.             moveBgAround();
    11.        
    12.         });
    13.        
    14.         function moveBgAround() {
    15.             var x = Math.floor(Math.random()*401);
    16.             var y = Math.floor(Math.random()*401);
    17.            
    18.             var time = Math.floor(Math.random()*1001) + 2000;
    19.        
    20.             $('.navihome, .naviaboutme, .naviportfolio, .naviconnect, .naviblog').animate({
    21.                 backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
    22.             }, time, "swing", function() {
    23.                 moveBgAround();
    24.             });
    25.         }
    26.        
    27.     </script>
     
    #6      
Seobility SEO Tool
x
×
×