CODEWITHSUNDEEP
jquery
Shane
Shane

Reputation: 11

Having some trouble with .animate()

I'm having some trouble trying to toggle multiple items.

Here's a summary of what I'm trying to achieve:

Here's the code I have so far

<script>
$(document).ready(function() {
var div_id;
var tile_object;
var ele_about = 0;
var ele_career = 0;
var ele_restaurant = 0;
var ele_contact = 0;
var ele_blog = 0;

var toggle_check = function (tile_object, div_id) {
 if (ele_about == 1){
 animate_close("ele_about", tile_object, div_id, "#tile-blog"); 
 } 
 else if (ele_career==1){
 animate_close("ele_career", tile_object, div_id, "#tile-career-content");
 }
 else if (ele_restaurant==1){
 animate_close("ele_restaurant", tile_object, div_id, "#tile-restaurant-content");
 }
 else if (ele_contact==1){
 animate_close("ele_contact", tile_object, div_id, "#tile-contact-content");
 } 
 else if (ele_blog==1){
 animate_close("ele_blog", tile_object, div_id, "#tile-blog");
 } 
 else { 
 animate_open(tile_object, div_id); 

 }
}

var animate_close = function (tile_close, tile_open, div_id, div_close){
 $(div_close).animate({
 width: "toggle",
 }, 600, "linear", function (){ animate_open(tile_object, div_id); }
 ); 

 tile_close = 0;
}

var animate_open = function (tile_object, div_id) {
 $(div_id).animate({
 width: "toggle",
 }, 600);

 tile_object = 1;
 alert(ele_about)
}

$("#tile-about").click( function (){
 toggle_check(ele_about, "#tile-blog"); 
});

$("#tile-career").click( function (){
 toggle_check("ele_career", "#tile-career-content");
});

$("#tile-restaurant").click( function (){
 toggle_check("ele_restaurant", "#tile-restaurant-content");
});
}); </script>

And here's the HTML

<a id="trigger-about" href="#"><div id="tile-about" class="tile-about-inactive"></div></a>
<div id="tile-career" class="tile-career-inactive"></div>
<div id="tile-restaurant" class="tile-restaurant-inactive"></div><div id="tile-contact" class="tile-contact-inactive"></div>

<div id="tile-blog" class="div-hide">
blog content
</div>

<div id="tile-about-content" class="div-hide">
career content
</div>

<div id="tile-career-content" class="div-hide">
career content
</div>

<div id="tile-restaurant-content" class="div-hide">
restaurant content
</div>

<div id="tile-contact-content" class="div-hide">
contact content
</div>

"div-hide" class is just a "display:none" css to hide the content initially and the "tile--active" is for my hover effect, which works fine.

After running this, for some reason, the "ele_" variable doesn't transition into the "toggle_check()" and "animate_open()" functions. I noticed this because the alert(ele_about) keeps returning a 0 value.

Please help! I'm stumped :(

Upvotes: 1

Views: 97

Answers (3)

shane
shane

Reputation: 1

I got this sorted out with the help from a guy from jQuery forums.

Here's the solution https://forum.jquery.com/topic/having-some-trouble-with-animate#14737000002530879

Thanks for the help!

Upvotes: 0

shane
shane

Reputation: 1

This doesn't quite work as I would need the .content-divs to animate when closing instead of just hiding it.

I posted this on jQuery forums as well and got this:

$('div.trigger-div').click(function() { // Click on trigger
            var id = '#' + this.id + '-content'; // Find matching content div
            var openContent = function() {
                  $(id).animate({width: 'toggle'}, 600);
            };
            var current = $('div.content-div:visible'); // Find any open content
            if (current.length > 0) {
                  current.animate({width: 'toggle'}, 600, 'linear', function(){ openContent(); }); // Close it then open new one
            }
            else {
                  openContent(); // Open new one
            }
      });

While this works perfectly, there's still an issue whereby you can't close any divs once it's opened.

Meaning, if I click "tile-about" div, "tile-about-content" opens. When I click on "tile-about" again, "tile-about-content" closes and reopens. I need it to just close.

Is there a way to get the id name of the content and try to match it with this.id ?

Upvotes: 0

Liam Bailey
Liam Bailey

Reputation: 5905

What you need to do is group all the trigger divs together with a class, and all the content divs with another class, but also give them all an ID. Store the id for the div that should open as the data attribute of its corresponding trigger div, then when any trigger div is clicked you can simply do this:

$(".trigger-divs").click(function() {
var contentDiv = $("div#"+$(this).attr('data'));
$(".content-divs :visible").hide();//hide visible content div;
contentDiv.slideDown();//fadeIn, animate({width: '600px'}) whatever you want
})

Note: I am accessing data using attr, a because it is hardcoded, and b because of the differences in how jQuery 1.4, and 1.6 encapsulate data stored using the $.data method.

Upvotes: 0

Related Questions