How to use CSS within a jQuery?

Question

How to use CSS within a jQuery?

Navigation

#1 by (1 votes)

0

What I want is that this jQuery {

<script type="text/javascript" class="navegacion_header">
    jQuery(function(){
    jQuery(window).scroll(function(){
        if(jQuery(this).scrollTop() > 200) {
            jQuery('#logo-img img')
               $( "#logo-img img" ).addClass( “logo_cambio” );
                .attr('src','<?php  echo get_template_directory_uri() ?>/images/logo-tva2.png');
        }
        if(jQuery(this).scrollTop() < 200) {
            jQuery('#logo-img img')
                .css({'width':'113px','height':'168px', 'margin-top':'0',
          '-webkit-transition':'all 0.5s ease',
          '-moz-transition':'all 0.5s ease',
          '-ms-transition':'all 0.5s ease',
          '-o-transition':'all 0.5s ease',
          'transition':'all 0.5s ease'
                  })    
                .attr('src','<?php  echo get_template_directory_uri() ?>/images/logo-tva2.png');
        }
    });
});
</script>

You can detect this class in the CSS file:

.logo_cambio{
  width:51px;
  height:73px; 
  margin-top:-7.5%;
}

Now try adding this method $( "p" ).addClass( “logo_cambio” );

to jQuery

But it does not work for me.

javascript jquery html css

asked by Angel 05.12.2017 в 18:02

source

1 answer

DAO / VO Custom? Java swing duplicates the JTextField when resizing

score 1 · Answer 1

Good I think that with this you can serve as a guide, I have done with colors, you will have to change it and put it with images, I have left commented the part of images

$(document).ready(function(){
	
    //var ruta1 = "./img1.png";
    //var ruta2 = "./img2.png";
    
    $(window).scroll(function(){

      var posicionScroll = $(window).scrollTop();

      if (posicionScroll > 200){
        
        $("#logo-img img").removeClass("logoInicial");
   			$("#logo-img img").addClass("logoCambio");
        
        //$('img').prop("src",ruta1);

      }else{
        
        $("#logo-img img").removeClass("logoCambio");
   			$("#logo-img img").addClass("logoInicial");
        
        //$('img').prop("src",ruta2);
          
      }
    	
    });

});

html{
  background-color:gray;
}

#logo-img{
    height: 1200px;
    background-color:green;
    
}

#logo-img img{
  position: fixed;
}

.logoInicial{
  width:113px;
  height:168px;
  background-color: orange; 
  margin-top:0%;
  transition:all 0.5s ease;
}

.logoCambio{
  width:51px;
  height:73px;
  background-color: red; 
  margin-top:-7.5%;
  transition:all 0.5s ease;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="logo-img">
	<img src="" class="logoInicial">
  <!-- <img src="./img1.png" class="logoInicial"> -->
</div>
</body>
</html>