Is there a way for the animation code to only affect the show/hide toggle buttons and not interfere with the other jQuery code I have implemented for hiding and showing div text? When I included the animate code in my js page, it caused issues with the existing show/hide functionality.
$(document).ready(function() {
$("#hide").click(function() {
$("#data").hide();
$('#show').show();
$('#hide').css('display', 'none');
});
$("#show").click(function() {
$("#data").show();
$("#hide").show();
$('#show').css('display', 'none');
});
});
$(document).ready(function() {
$("#button").click(function() {
var div = $("div");
div.animate({
height: '300px',
opacity: '0.4'
}, "slow");
div.animate({
width: '300px',
opacity: '0.8'
}, "slow");
div.animate({
height: '100px',
opacity: '0.4'
}, "slow");
div.animate({
width: '100px',
opacity: '0.8'
}, "slow");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="hide">Hide</button>
<button id="show">Show</button>
<div id="data">If you click on the "Hide" button, I will disappear.</div>
<button id="button" style="position:absolute;top:500px;left:0px;">Start Animation</button>
<div id="div" style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>