Re-Rendering jquery effects

[Former Member]

I have created three panels and second panel contains jquery animation. On  button click respective panels are displayed ,the code for animation is written on onAfterRendering() function. when the second panel is loaded first, animation effects work but when we navigate through another panels by using onClick of button and Come back to second panel the effects are not working..

[Former Member]

I have written the following code on onAfterRendering function of view.On loading the effects are visible but when filter is applied on tile container the following effect for mouseover not working.

code snippet:

onAfterRendering : function(evt) {

  //$("#idProductPane2").hide();

  $("button[id*='__button']").css('visibility', 'hidden');

  $("div[id^='idProductTile']").mouseover

  (function() {

  TiD=this.id;

  tileData=this.children[1].children;

  $(this).css("background-color", "white");

  $(this).css("border", "groove");

  $(this).css("border-bottom-width", "0.8em");

                        $(this).css("border-right-width","0.4em");

                        $(this).find("button[id^='__button']").css('visibility', 'visible');

  });

  $("div[id^='idProductTile']").mouseout(function() {

  $(this).css("background-color", "white");

  $(this).css("border", "none");

  $("button[id^='__button']").css('visibility', 'hidden');

  });

how to re render the effects ?

[former_member91765]

A complete working example would be very helpful. For an example of setting this up, see http://jsbin.com/sidiq/1/edit?html,output

A few things to consider:

• SAPUI5 does not trigger rerendering unless it believes it (or a child) has changed.
• If a SAPUI5 control has its SAP setting for "visible" set to false, it actually skips rerendering altogether.
• You seem to be making CSS revisions using jQuery to directly modify other DOM elements. This is not a good idea -- use .addClass et al on the SAPUI5 control instead where possible. This will cause SAPUI5 to rerender, and the library will apply your classes at that time. Setting them directly in DOM may also end up with SAPUI5 rerendering the other elements after you've used jQuery selector, causing your changes to be overwritten before they are even rendered by the browser.

Finally, onAfterRendering may be the wrong place to do mouseover effects -- SAPUI5 has extensive built-in support in the library for interaction events (you'll unfortunately have to dig through the debug sources to get them, the documentation is missing this -- but for starters see https://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/jQuery.sap.html#.ControlEvents and  https://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/jQuery.sap.PseudoEvents.html ).

[Former Member]

can you create a snippet ?