Problemas con jQuery en Internet Explorer

crafter_v · #1 (**permalink**) 18/03/2013, 13:03

Hola, tengo una página web con efectos en JQuery que funcionan a la perfección en Firefox y Chrome pero no asi en Internet explorer. El efecto lo que hace es bajar la opacidad al 40% a unas imágenes y textos cuando pasas el cursor por encima. El problema en Internet Explorer es que si bien funciona la reducción de la opacidad, tambien aparecen unos pixels blancos encima de algunas de las imágenes y además tanto las imagenes como el texto informativo que tienen debajo se distorsionan. Nose como solucionarlo, ¿alguna ayuda?

emprear · #2 (**permalink**) 18/03/2013, 13:23

Sin ver un código funcionando, no se como prodría analizarse eso. ¿O a vos te parece que si?

Saludos

crafter_v · #3 (**permalink**) 20/03/2013, 13:51

Código:

   <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>   
      <script>
			$(document).ready(function(){
				
				
				$(".boton1").hover
				
					(function(){
	
						$(this).stop().fadeTo(0,0.4);
					
					}, function(){
					$(this).stop().fadeTo(0, 1.0);
					
					});
					
					
				$(".boton2").hover
				
					(function(){
	
						$(this).stop().fadeTo(0,0.4);
					
					}, function(){
					$(this).stop().fadeTo(0, 1.0);
					
					});	
					
					
				$(".boton3").hover
				
					(function(){
	
						$(this).stop().fadeTo(0,0.4);
					
					}, function(){
					$(this).stop().fadeTo(0, 1.0);
					
					});
					
									
				$(".boton4").hover
				
					(function(){
	
						$(this).stop().fadeTo(0,0.4);
					
					}, function(){
					$(this).stop().fadeTo(0, 1.0);
					
					});					

				
				$("#logo").hover
				
					(function(){
	
						$(this).stop().fadeTo(0,0.4);
					
					}, function(){
					$(this).stop().fadeTo(0, 1.0);
					
					});
				
				
				$(".apartado").hover
				
					(function(){
	
						$(this).stop().fadeTo(250,0.4);
					
					}, function(){
					$(this).stop().fadeTo(250, 1.0);
					
					});
					
					
				$(".link2").hover
				
					(function(){
						
					$(this).fadeTo(0,0.4);
					
					
					}, function(){
					$(this).fadeTo(0, 1.0);
					
					});				
				
			});
      </script>

emprear · #4 (**permalink**) 20/03/2013, 14:25

Y el HTML?

cesarin3134 · #5 (**permalink**) 20/03/2013, 15:04

hola para empezar todo el codigo k haz escrito puedes optimizarlo en este modo :
y despues aplica esta solucion :
http://blog.bmn.name/2008/03/jquery-...glitch/:adios:

Código Javascript:

Ver original$(document).ready(function () {
    $(".boton1, .boton2, .boton3, .boton4, #logo, .link2").hover(
 
    function () {
        $(this).stop().fadeTo(0, 0.4);
    },
 
    function () {
        $(this).stop().fadeTo(0, 1.0);
    });
  
    $(".apartado").hover(function () {
        $(this).stop().fadeTo(250, 0.4);
    },
 
    function () {
        $(this).stop().fadeTo(250, 1.0);
    });
});

crafter_v · #6 (**permalink**) 20/03/2013, 17:13

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<LINK REL=StyleSheet HREF="css/estilos.css" TYPE="text/css" MEDIA=screen>


      <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>   
      <script>
			$(document).ready(function(){
				
				
				$(".boton1").hover
				
					(function(){
	
						$(this).stop().fadeTo(0,0.4);
					
					}, function(){
					$(this).stop().fadeTo(0, 1.0);
					
					});
					
					
				$(".boton2").hover
				
					(function(){
	
						$(this).stop().fadeTo(0,0.4);
					
					}, function(){
					$(this).stop().fadeTo(0, 1.0);
					
					});	
					
					
				$(".boton3").hover
				
					(function(){
	
						$(this).stop().fadeTo(0,0.4);
					
					}, function(){
					$(this).stop().fadeTo(0, 1.0);
					
					});
					
									
				$(".boton4").hover
				
					(function(){
	
						$(this).stop().fadeTo(0,0.4);
					
					}, function(){
					$(this).stop().fadeTo(0, 1.0);
					
					});					

				
				$("#logo").hover
				
					(function(){
	
						$(this).stop().fadeTo(0,0.4);
					
					}, function(){
					$(this).stop().fadeTo(0, 1.0);
					
					});
				
				
				$(".apartado").hover
				
					(function(){
	
						$(this).stop().fadeTo(250,0.4);
					
					}, function(){
					$(this).stop().fadeTo(250, 1.0);
					
					});
					
					
				$(".link2").hover
				
					(function(){
						
					$(this).fadeTo(0,0.4);
					
					
					}, function(){
					$(this).fadeTo(0, 1.0);
					
					});				
				
			});
      </script>


</head>


<body>


	<hr class="separador2" size=1 width=100% align="left" color="#000000"/>


	<div id="contenedor">
    
    
		<div class="menu">
    		<div class="boton1">
            	<a href="index.html"><img src="images/boton1.png" width="76" height="76" /></a>
            </div>
			<div class="boton2">
            	<a href="works.html"><img src="images/boton2.png" width="76" height="76" /></a>
            </div>        
    		<div id="logo">
	  			<a href="index.html"><img src="images/logofinal.png" width="274" height="173" /></a>
    		</div>
    		<div class="boton3">
            	<a href="about.html"><img src="images/boton3.png" width="76" height="76" /></a>
            	</div>
			<div class="boton4">
            	<a href="contact.html"><img src="images/boton4.png" width="76" height="76" /></a>
            </div>
		</div> 
            
            
		<div id="corte2">
		</div>  
            
                
		<hr class="separador" size=1 width=924px align="left" color="#000000"/>
            
   
   		<div id="trabajos">
        
   
            <div class="columna2">
        
                <div class="apartado">
                    <a class="link1" href="trabajo1.html">
                        <img class="estilo1" src="images/trabajo1.jpg" width="212" height="287" />
                    	<h1 class="estilo1">
							TRABAJO1
                        </h1>
                        <hr class="estilo1" size=1 width=12px align="left" color="#000000"/>
                        <p class="estilo1">
                            Descripción de trabajo 1.
                        </p> 
                    </a>                                            
                </div> 
 
                
                
                <hr class="estilo2" size=1 align="left" color="#000000"/>       
  
                <div class="apartado">
                    <a class="link1" href="trabajo2.html">
						<img class="estilo1" src="images/trabajo2.jpg" width="212" height="166" />
						<h1 class="estilo1">
         					 TRABAJO 2
          				</h1>
                        <hr class="estilo1" size=1 width=12px align="left" color="#000000"/>
                        <p class="estilo1">
                            Descripción de trabajo 2.
                        </p>
                    </a>                   
                </div>   
                
                                     
  
                
                
                <hr class="estilo2" size=1 align="left" color="#000000"/>  
    
                    
            </div>
    
    
            <div class="columna2">


                <div class="apartado">
                    <a class="link1" href="trabajo3.html">
						<img class="estilo1" src="images/trabajo3.jpg" width="212" height="293" />
                        <h1 class="estilo1">                
							TRABAJO 3						</h1>                   
                        <hr class="estilo1" size=1 width=12px align="left" color="#000000"/>
                        <p class="estilo1">
                            Descripción de trabajo 3.
                        </p>               
                    </a>              
                </div>
                
                
				<hr class="estilo2" size=1 align="left" color="#000000"/>


                <div class="apartado">
                    <a class="link1" href="trabajo4.html">
						<img class="estilo1" src="images/trabajo4.jpg" width="216" height="216" />
						<h1 class="estilo1">                
           					TRABAJO 4
        				</h1>                   
                        <hr class="estilo1" size=1 width=12px align="left" color="#000000"/>
                        <p class="estilo1">
                            Descripción de trabajo 4.
                        </p>               
                    </a>
                </div>                 
  
                
                  
               <hr class="estilo2" size=1 align="left" color="#000000"/>
               
                
			</div>              
    
    
            <div class="columna2">             
                
                
				<div class="apartado">
                    <a class="link1" href="trabajo5.html">
						<img src="images/trabajo5.jpg" width="212" height="293" />
                        <h1 class="estilo1">
							TRABAJO 5
						</h1>
                        <hr class="estilo1" size=1 width=12px align="left" color="#000000"/>
                        <p class="estilo1">    
                           Descripción de trabajo 5.
                        </p> 
                    </a>    
                </div>                 
                                

                <hr class="estilo2" size=1 align="left" color="#000000"/> 
    
    
                 <div class="apartado">
                    <a class="link1" href="trabajo6.html">
						<img class="estilo1" src="images/trabajo6.jpg" width="212" height="169" />
                        <h1 class="estilo1">  
							TRABAJO 6
						</h1>
                        <hr class="estilo1" size=1 width=12px align="left" color="#000000"/>
                        <p class="estilo1">
                           Descripción de trabajo 6.
                        </p>
                    </a>   
                </div>                        
                 
                
                <hr class="estilo2" size=1 align="left" color="#000000"/>
                
                
			</div>           
            
            
			<div class="columna3"> 
            
            
                <div class="apartado">
                    <a class="link1" href="trabajo7.html">
						<img class="estilo1" src="images/trabajo7.jpg" width="212" height="287" />
						<h1 class="estilo1">
           					TRABAJO 7
        				</h1>
                        <hr class="estilo1" size=1 width=12px align="left" color="#000000"/>
                        <p class="estilo1">    
                            Descripción de trabajo 7.
                        </p> 
                    </a>    
                </div>
                
                
                <hr class="estilo2" size=1 align="left" color="#000000"/> 
                
                
                 				<div class="apartado">
                    <a class="link1" href="trabajo8.html">
						<img class="estilo1" src="images/trabajo8.jpg" width="212" height="200" />
						<h1 class="estilo1">
           					TRABAJO 8
        				</h1>
                        <hr class="estilo1" size=1 width=12px align="left" color="#000000"/>
                        <p class="estilo1">    
                            Descripción de trabajo 8.
                        </p> 
                    </a>    
                </div>              
             
           
                                  
                <hr class="estilo2" size=1 align="left" color="#000000"/>                
                            
          </div>
        
        
        </div>
        
       
	</div>





</body>


</html>

crafter_v · #7 (**permalink**) 24/03/2013, 01:39

Ahi está todo el código, ¿nadie tiene idea de que puede ser?

emprear · #8 (**permalink**) 24/03/2013, 05:51

Cita:

Iniciado por crafter_v

Ahi está todo el código, ¿nadie tiene idea de que puede ser?

lo que pasás no dice mucho, si yo ejecuto ese código, lo único que puedo apreciar es lo de la opacidad, y se vé igual en todos los navegadores. En primer lugar no poseo imágenes y en segundo, tampoco el css, y siendo el fondo de pantalla blanco por defecto, obviamente no se vé ningun pixel blanco.
De todas formas yo apuntaría primero a corregir tu html, que según la consola tiene cerca de 80 errores, puede que no todo relevantes, pero bien pude que si, conociendo las particularidades de IE.

Saludos