Problem with Jquery with style if

Question

Problem with Jquery with style if

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Hello I'm trying to show and hide depending on where you click. It is not generating any type of error.

The intention is that when you click, the input is opened, which it does, but when I apply the if, the else does nothing, and when you click outside it disappears.

$(document).ready(function(){
    $("#lupa").on('click', function(){
        //alert("Fue presionado.");
        //$('#buscador-text').slideToggle('swing');
        var buscador = $("#buscador-text").css;
        if(buscador.display == 'none'){
        	buscador.animate({ width: "toggle", opacity: "1", left: '170px', display:'inline-block'}, "swing");
        }
        else if (buscador.display == 'inline-block') {
			buscador.animate({ width: "toggle", opacity: "1", left: '70px', display:'inline-block'}, "swing");

        }
      
    });
});

#buscador{
	width: 40%;
	margin: 0.7em 4em;
	font-size: 1.5rem;
}
input[type='search']{
		font-size: 1rem !important;
		margin-top: -0.8em;
		position: absolute;
		margin-left: -2em;
		opacity: 0;
	}
span{
		padding-right: 1em;
	}
#buscador-text{
		display: none;
		position: absolute;
	}

<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<section id="buscador">
		<span id="lupa"><i class="fas fa-search"></i></span><input id="buscador-text" type="search" name="buscador" placeholder="Buscar...">
	</section>

jquery css

asked by sergibarca 05.01.2018 в 13:14

source

2 answers

0

You can do it this way:

$(document).ready(function(){
    $("#lupa").on('click', function(){
        var buscador = $("#buscador-text");
        if(!buscador.is(':visible')){
            buscador.animate({ width: "toggle", opacity: "1", left: '170px', display:'inline-block'}, "swing");
        }
        else{
            buscador.animate({ width: "toggle", opacity: "1", left: '70px', display:'inline-block'}, "swing");
        }
    });
});

#buscador{
    width: 40%;
    margin: 0.7em 4em;
    font-size: 1.5rem;
}
input[type='search']{
    font-size: 1rem !important;
    margin-top: -0.8em;
    position: absolute;
    margin-left: -2em;
    display: none;
}
span{
    padding-right: 1em;
}
#buscador-text{
    display: none;
    position: absolute;
}

<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="buscador">
  <span id="lupa"><i class="fas fa-search"></i></span>
  <input id="buscador-text" type="search" name="buscador" placeholder="Buscar...">
</section>

answered by 05.01.2018 в 13:29

Problem when adding an object to an array in ES6 - this.listLogs.data [index] .push is not a function How to show all the articles of a sale? Laravel

score 0 · Accepted Answer

You have two problems. First, $("#buscador-text").css will not return a string. What you are really looking for is $("#buscador-text").css('display') .

Second, after the animation you give it, the object remains with display:block . (I do not understand why) so the condition of being equal to inline-block will never be fulfilled unless, after the animate explicitly fix that property.

The following code works for me:

$(document).ready(function () {



  $("#lupa").on('click', function () {
      var buscador =$("#buscador-text"),
      display = buscador.css('display');

    if (display === 'none') {
      buscador.animate({
        width: "toggle",
        opacity: "1",
        left: '170px',
        display: 'inline-block'
      }, "swing").css('display','inline-block');
    } else {
      buscador.animate({
        width: "toggle",
        opacity: "1",
        left: '70px',
        display: 'none'
      }, "swing");

    }
  });

});

#buscador{
	width: 40%;
	margin: 0.7em 4em;
	font-size: 1.5rem;
}
input[type='search']{
		font-size: 1rem !important;
		margin-top: -0.8em;
		position: absolute;
		margin-left: -2em;
		opacity: 0;
	}
span{
		padding-right: 1em;
	}
#buscador-text{
		display: none;
		position: absolute;
    left:70px;
	}

<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<section id="buscador">
		<span id="lupa"><i class="fas fa-search"></i></span><input id="buscador-text" type="search" name="buscador" placeholder="Buscar...">
	</section>