Hey everyone, I have a question regarding jQuery. I have a toggle function that is supposed to activate when clicking on a specific element - in this case, my logo image with the id of #logobutton. The toggle works great, but there's a problem. The animation also triggers when clicking on other links on the page or random div boxes (like my nav bg). Since I'm new to JavaScript, I might be missing something obvious. Thanks for any help you can provide!
If you want to check out the code, here's the fiddle: http://jsfiddle.net/tRf36/1/
Here is the jQuery code:
!--jquery script, must be above all jquery elements-->
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<!--script for bg toggle-->
<script type="text/javascript">
$( document ).ready(function() {
$("#logobutton").click(function() {
$(".galbox").toggleClass("galbox-change");
});
});
</script>
<!--bg fade hide on load-->
<script>
$(document).ready(function(){
$("#gallerybox").fadeTo(3000, 0.00, function() {
$("#gallerybox").fadeTo(1000, 1.00);
});
});
</script>
I'm hoping someone can help me identify if I've targeted something incorrectly or what might be causing the issue with the animation triggering from unintended clickable areas.