Sorry for all the code: S
The mouseenter / mouseleave bundle on an element in the HomeIconView constantly keeps firing. Firebug ends the lines for console output in mouseenter / mouseleave output. I just want to get a rollover effect. I must assume that I am using the trunk. I just started using this week. So far, I have only tested Firefox.
When the "HomeView" is displayed, the "HomeIconView" is dynamically inserted into the "HomeView". There is no problem with the HomeIconView events being called, the problem is that they are constantly being called! It does not seem to matter whether the mouse actually entered or left. The trunk, after the initial center of the mouse and to the final mouse axis, simply performs a repetition using renderRollOver () and renderRollOut (), even if there is no mouse movement .: (
I spent days looking for a solution. All I can find are topics in which people cannot bind events, not threads, where people encounter active calls to related functions.
In general, I am open to any suggestion on best coding practice, but in particular, help me rid me of my misfortune in this bind mouseenter / leave thing event.
Again, after trying all the code, I did not want to leave ambiguity.
... window.HomeIconView = Backbone.View.extend ({ model: new HomeIconModel, template: _.template([ '<a href="#">', '<div class="homeIcon" id="homeIcon-<%= id %>">', '<img src="<%= homeIconSrc %>">', '</div>', '</a>' ].join('')), events: { 'mouseenter': 'renderRollOver', 'mouseleave': 'renderRollOut' }, initialize: function(md) { _.bindAll(this, 'render'); this.id = 'Icon-' + md.c.id.toString(); this.model.save(md.c); }, render: function() { return this.$el.html(this.template(this.model.toJSON())); }, renderRollOver: function() { console.log('rollover'); $('#homeRollOver, #homeRollOver2').css({ 'display': 'block', 'opacity': 0.125 }); $('#home' + this.id).stop().animate( { opacity: 1 }, 1000); var elOffset = $('#home' + this.id).offset(); var elOffsetL = elOffset.left - ( ( parseInt($('#homeRollOver').css('width')) - parseInt($('#home' + this.id).css('width')) ) / 2 ); var elOffsetT = elOffset.top - ( ( parseInt($('#homeRollOver').css('height')) - parseInt($('#home' + this.id).css('height')) ) / 2 ); $('#homeRollOver, #homeRollOver2').css( { 'marginLeft': elOffsetL, 'marginTop': elOffsetT } ); }, renderRollOut: function() { console.log('rollout'); $('#homeRollOver, #homeRollOver2').css('display', 'none'); $('#home' + this.id).stop().animate({ opacity: 0.125 }, 1000 ); } }); window.HomeView = Backbone.View.extend({ model: new PreloadHomeImages, template: _.template([ '<div id="homeIconWrapper"></div>', '<div id="homeRollOver"></div>', '<div id="homeRollOver2"></div>' ].join('')), initialize: function() { _PAGE_H = $(document).height(); _PAGE_W = $(document).width(); this.preload(); this.render(); }, preload: function() { var i = 0; _.each(this.model.get('icons'), function(icon) { var tmpimg = $('<img/>'); tmpimg.src = icon.image; i++; }); this.$el.css('paddingTop', (_PAGE_H - 180) / 2) ; $('#wrapper').css('height', _PAGE_H - 50); }, render: function() { this.$el.html(this.template); var i = 0; _.each(this.model.get('icons'), function(icon) { var iconView = new HomeIconView({ model: new HomeIconModel, c: { 'id': i, 'homeIconSrc': icon.image } }); $('#homeIconWrapper').append(iconView.render); i++; }); return this; } }); ...