Tema: Menu Jquery se traba cuando el slider cambia de imagen
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/07/2014, 09:42
sancone
 
Fecha de Ingreso: julio-2014
Mensajes: 4
Antigüedad: 10 años, 8 meses
Puntos: 0
Pregunta Menu Jquery se traba cuando el slider cambia de imagen
Hola que tal tengo un problema urgente y necesito de su conocimiento, como lo mencione en el titulo tengo un slider fullscreen y un menu jquery que al momento que topa en la parte superior se convierte en flotante (position:fixed), y cuando el slider cambia de imagen y me encuentro haciendo hover a algun elemento del menu se traba hasta que termina la animacion del slider.

Espero haberme explicado bien ojala me pueda ayudar, les dejo mi codigo.

Código HTML: 
Ver original
  1. <!doctype html>
  2. <html><!-- InstanceBegin template="/Templates/Plantilla Oficial.dwt" codeOutsideHTMLIsLocked="false" -->
  3. <head>
  4. <meta charset="utf-8">
  5. <!-- InstanceBeginEditable name="doctitle" -->
  6. <title></title>
  7. <!-- InstanceEndEditable -->
  8. <link rel="stylesheet" type="text/css" href="css/page-style.css" />
  9. <link rel="stylesheet" type="text/css" href="css/header/bgfull.css"/>
  10. <!-- InstanceBeginEditable name="head" -->
  11. <link rel="stylesheet" type="text/css" href="css/wrapper/style.css" />
  12. <!-- InstanceEndEditable -->
  13. </head>
  14. <body>
  15. <div id="slidersuperior">
  16.   <ul id="cbp-bislideshow" class="cbp-bislideshow">
  17.     <li> <img src="img/header/slider/1.jpg" class="imgfull"> </li>
  18.     <li> <img src="img/header/slider/2.jpg" class="imgfull"> </li>
  19.     <li> <img src="img/header/slider/3.jpg" class="imgfull"> </li>
  20.     <li> <img src="img/header/slider/4.jpg" class="imgfull"> </li>
  21.     <li> <img src="img/header/slider/5.jpg" class="imgfull"> </li>
  22.     <li> <img src="img/header/slider/6.jpg" class="imgfull"> </li>
  23.   </ul>
  24. </div>
  25. <header class="topnav">
  26.   <nav>
  27.     <ul>
  28.       <li><a href="">Indicadores</a></li>
  29.       <li><a href="">Directorio</a></li>
  30.       <li><a href="">Asesoria</a></li>
  31.       <li><a href="">Finanzas</a></li>
  32.       <li><a href="">Corporativo</a></li>
  33.       <li><a href="">Normatividad</a></li>
  34.     </ul>
  35.   </nav>
  36.   <a href="#" id="navbtn">Nav Menu</a><img id="logo" src="img/logo-cmc.png" />
  37. </header>
  38. <!-- InstanceBeginEditable name="Resumen" -->
  39. <section class="resumen">
  40.   <div id="resumen">
  41.     <p></p>
  42.   </div>
  43. </section>
  44. <section class="historia">
  45.   <div id="historia">
  46.     <p></p>
  47.   </div>
  48. </section>
  49. <!-- InstanceEndEditable -->
  50.  
  51.  
  52. <!-- LA PAGINA CARGA MAS RAPIDO CON JS AL FINAL -->
  53. <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
  54. <script src="js/header/modernizr.js"></script> 
  55. <script type="text/javascript" src="js/header/loader2.min.js"></script> 
  56. <script type="text/javascript" src="js/header/script.js"></script> 
  57. <script src="js/header/slideshow.js"></script> 
  58. <script>
  59.     $(function() {
  60.         cbpBGSlideshow.init();
  61.     });
  62. </script> 
  63. </body>
  64. <!-- InstanceEnd --></html>

ESTE ES EL CODIGO JAVASCRIPT QUE AFECTA AL MENU
Código Javascript: 
Ver original
  1. $(document).ready(function() {
  2.   var menu = $('header');
  3.   // Cada vez que se haga scroll en la página
  4.   // haremos un chequeo del estado del menú
  5.   // y lo vamos a alternar entre 'fixed' y 'static'.
  6.  
  7.   $(window).on('scroll', function() {
  8.      //alert($(window).scrollTop());
  9.     if($(window).scrollTop() >= 500)
  10.       menu.addClass('menu-fijo');
  11.     else 
  12.       menu.removeClass('menu-fijo');
  13.   });
  14. });
  15.  
  16. $(function(){
  17.   var nb = $('#navbtn');
  18.   var n = $('.topnav nav');
  19.   //Sirve para cuando se cambia de tamaño la pantalla muestre los menus
  20.   $(window).on('resize', function(){  
  21.     if($(this).width() < 500 && n.hasClass('keep-nav-closed')) {
  22.     // si el menú de navegación y el botón de navegación son visibles.
  23.     //volver a ocultar el menú de navegación y retire la clase oculta.
  24.       $('.topnav nav').hide().removeAttr('class');
  25.     }
  26.     if(nb.is(':hidden') && n.is(':hidden') && $(window).width() >= 500) {
  27.       // si el menú de navegación y el botón de navegación son tanto oculta,
  28.       //ejecuta cambios cuando la resolución de la pantalla es de 569px
  29.       $('.topnav nav').show().addClass('keep-nav-closed');
  30.     }
  31.   }); 
  32.   
  33.   $('#navbtn').on('click', function(e){
  34.     e.preventDefault();
  35.     $(".topnav nav").slideToggle(500);
  36.   });
  37.   
  38. });

Y ESTE OTRO AFECTA AL SLIDER

Código Javascript: 
Ver original
  1. // JavaScript Document
  2. var cbpBGSlideshow = (function() {
  3.  
  4. var $slideshow = $( '#cbp-bislideshow' ),
  5.     $items = $slideshow.children( 'li' ),
  6.     itemsCount = $items.length,
  7.     $controls = $( '#cbp-bicontrols' ),
  8.     navigation = {
  9.         $navPrev : $controls.find( 'span.cbp-biprev' ),
  10.         $navNext : $controls.find( 'span.cbp-binext' ),
  11.         $navPlayPause : $controls.find( 'span.cbp-bipause' )
  12.     },
  13.     // current item´s index
  14.     current = 0,
  15.     // timeout
  16.     slideshowtime,
  17.     // true if the slideshow is active
  18.     isSlideshowActive = true,
  19.     // it takes 3.5 seconds to change the background image
  20.     interval = 7000;
  21.  
  22. function init( config ) {
  23.  
  24.     // preload the images
  25.     $slideshow.imagesLoaded( function() {
  26.  
  27.         if( Modernizr.backgroundsize ) {
  28.             $items.each( function() {
  29.                 var $item = $( this );
  30.                 $item.css( 'background-image', 'url(' + $item.find( 'img' ).attr( 'src' ) + ')' );
  31.             } );
  32.         }
  33.         else {
  34.             $slideshow.find( 'img' ).show();
  35.             // for older browsers add fallback here (image size and centering)
  36.         }
  37.         // show first item
  38.         $items.eq( current ).css( 'opacity', 1 );
  39.         // start the slideshow
  40.         startSlideshow();
  41.  
  42.     } );
  43.  
  44. }
  45.  
  46. function navigate( direction ) {
  47.  
  48.     // current item
  49.     var $oldItem = $items.eq( current );
  50.  
  51.     if( direction === 'next' ) {
  52.         current = current < itemsCount - 1 ? ++current : 0;
  53.     }
  54.     else if( direction === 'prev' ) {
  55.         current = current > 0 ? --current : itemsCount - 1;
  56.     }
  57.  
  58.     // new item
  59.     var $newItem = $items.eq( current );
  60.     // show / hide items
  61.     $oldItem.css( 'opacity', 0 );
  62.     $newItem.css( 'opacity', 1 );
  63.  
  64. }
  65.  
  66. function startSlideshow() {
  67.  
  68.     isSlideshowActive = true;
  69.     clearTimeout( slideshowtime );
  70.     slideshowtime = setTimeout( function() {
  71.         navigate( 'next' );
  72.         startSlideshow();
  73.     }, interval );
  74.  
  75. }
  76.  
  77. function stopSlideshow() {
  78.     isSlideshowActive = false;
  79.     clearTimeout( slideshowtime );
  80. }
  81.  
  82. return { init : init };
  83.  
  84. })();