The jquery plugin is correctly applied on hover, but not on a hidden element

Question

I am trying to apply a plugin, but am encountering some problems. Here is the code

$('.shuffle').one('mouseenter', function () {
    $(this).BlocksIt({
        numOfCol: 4,
        offsetX: 8,
        offsetY: -18,
        blockElement: '.grid'
    });
})

And I call it that

$(window).load(function () {
    $('.shuffle').each(function (i) {
        var self = this
        $(self).trigger('mouseenter')
    })
})

I am creating a menu. Here is a demonstration of the image.

After mouseenter it becomes like

You see a difference that removes white spaces and arranges blocks in the correct order. The problem is that I want to do this when the page loads, so I don’t need to drag the mouse over each menu item so that its child node is located.

Here is what I came across after each method.

You see that the mesh class inside each shuffle class is confused.

Here is my code. I am posting a few examples because my code is quite complicated. This mainly works on the tass class.

<div class="col-xs-12 col-sm-12 col-md-12 shuffle" style="height: 335px;">
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 231.5px; left: 0px; top: -18px; position: absolute;">
            <h2 class="title">Armoires &amp; Bookcases</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Showcases/ Displays</a></li>
                    <li><a href="category-v1.html">Bookcases</a></li>
                    <li><a href="category-v1.html">Armoires</a></li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 231.5px; left: 277.5px; top: -18px; position: absolute;">
            <h2 class="title">Carts &amp; Stands</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Carts</a></li>
                    <li><a href="category-v1.html">Stands</a></li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 231.5px; left: 832.5px; top: -18px; position: absolute;">
            <h2 class="title">Filing, Storage &amp; Accessories</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Lateral Files</a></li>
                    <li><a href="category-v1.html">Fire Resistant File Cabinets &amp; Safes</a></li>
                    <li><a href="category-v1.html">File Cabinet Accessories</a></li>
                    <li><a href="category-v1.html">Art &amp; Drafting Files</a></li>
                    <li><a href="category-v1.html">Shelving</a></li>
                    <li><a href="category-v1.html">Overfiles &amp; Tops</a></li>
                    <li><a href="category-v1.html">Mobile Files &amp; Carts</a></li>
                    <li><a href="category-v1.html">Literature Organizers/Sorters/Racks</a></li>
                    <li><a href="category-v1.html">Shelving Accessories</a></li>
                    <li><a href="category-v1.html">Storage Cabinets &amp; Lockers</a></li>
                    <li><a href="category-v1.html">Vertical Files</a></li>
            </ul>
        </div>
</div>


<div class="col-xs-12 col-sm-12 col-md-12 shuffle" style="height: 0px;">
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 9px; left: 0px; top: -18px; position: absolute;">
            <h2 class="title">Binders &amp; Accessories</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Binders</a></li>
                    <li><a href="category-v1.html">Binder Accessories</a></li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 9px; left: 0px; top: -54px; position: absolute;">
            <h2 class="title">Boards &amp; Easels</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Boards</a></li>
                    <li><a href="category-v1.html">Board Accessories</a></li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 9px; left: 0px; top: -198px; position: absolute;">
            <h2 class="title">Desk Organizers</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Desk Organizers &amp; Holders</a></li>
                    <li><a href="category-v1.html">Desktop Computer Accessories</a></li>
                    <li><a href="category-v1.html">Bookends &amp; Book Shelves</a></li>
                    <li><a href="category-v1.html">Wall Organizers</a></li>
                    <li><a href="category-v1.html">Desktop Organizers &amp; Holders</a></li>
                    <li><a href="category-v1.html">Desktop Organizer Accessories</a></li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 9px; left: 0px; top: -234px; position: absolute;">
            <h2 class="title">Filing Supplies</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Medical Filing</a></li>
                    <li><a href="category-v1.html">Folders</a></li>
                    <li><a href="category-v1.html">Filing Accessories</a></li>
                    <li><a href="category-v1.html">Jackets</a></li>
                    <li><a href="category-v1.html">Hanging Folders</a></li>
                    <li><a href="category-v1.html">Report Covers &amp; Portfolios</a></li>
                    <li><a href="category-v1.html">File Folders</a></li>
                    <li><a href="category-v1.html">Expanding Files</a></li>
                    <li><a href="category-v1.html">Guides</a></li>
                    <li><a href="category-v1.html">Folder Frames and Sorters</a></li>
                    <li><a href="category-v1.html">End Tab Folders / Medical</a></li>
                    <li><a href="category-v1.html">Classification Folders</a></li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 9px; left: 0px; top: -270px; position: absolute;">
            <h2 class="title">Envelopes &amp; Forms</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Forms &amp; Certificates</a></li>
                    <li><a href="category-v1.html">Envelopes</a></li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 9px; left: 0px; top: -306px; position: absolute;">
            <h2 class="title">General Supplies</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Paper Punch Accessories</a></li>
                    <li><a href="category-v1.html">Pad Holders</a></li>
                    <li><a href="category-v1.html">Magnification</a></li>
                    <li><a href="category-v1.html">Indexing Flags &amp; Tabs</a></li>
                    <li><a href="category-v1.html">Clocks</a></li>
                    <li><a href="category-v1.html">Clips, Tacks &amp; Rubber Bands</a></li>
                    <li><a href="category-v1.html">Books</a></li>
                    <li><a href="category-v1.html">Badges &amp; Holders</a></li>
                    <li><a href="category-v1.html">Scissors, Rulers &amp; Paper Trimmers</a></li>
                    <li><a href="category-v1.html">Paper Punches</a></li>
                    <li><a href="category-v1.html">Stamps &amp; Pads Accessories</a></li>
                    <li><a href="category-v1.html">Signs &amp; Nameplates</a></li>
                    <li><a href="category-v1.html">Staplers</a></li>
                    <li><a href="category-v1.html">Stapler Accessories</a></li>
                    <li><a href="category-v1.html">Tape, Glue &amp; Adhesives</a></li>
                    <li><a href="category-v1.html">Tags &amp; Tickets</a></li>
            </ul>
        </div>
</div>

Link to the plugin. Blocksit

. , ,

$('.shuffle').one('mouseenter', function () {
    $(this).BlocksIt({
        numOfCol: 4,
        offsetX: 8,
        offsetY: -18,
        blockElement: '.grid'
    });
})  

, , , . , , . , ?

Answer 1

, , .
css

.dropdown-display {
    display:block;
}

, , div

var $selector = $(this).parents().eq(3);    

$('.shuffle').each(function () {
    var self = this;
    var $selector = $(this).parents().eq(3);
    $selector.addClass('dropdown-display');
    $(self).BlocksIt({
        numOfCol: 4,
        offsetX: 8,
        offsetY: -18,
        blockElement: '.grid'
    })
    $selector.removeClass('dropdown-display');
})

, ,

$selector.css({display:'block'})

$selector.css({display:'none'})

inline , .

<ul class="dropdown-menu fadeInUp animatedfadeInUpanimated" style="display:block">

<ul class="dropdown-menu fadeInUp animatedfadeInUpanimated" style="display:none">

.
, display:none . reset .

, .

Answer 2

, , style. .

BlocksIt Masonry. ? , .

div s. . "" div, div s.

: http://jsbin.com/gixuhu

<head>
<style>
    /* REQUIRED FOR MASONRY TO WORK! */
    .masonry > div{width:230px;}
</style>
</head>
<body>
    <!-- SEE JSBIN LINK ABOVE FOR HTML -->
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
    <script>
        // ProTip: if you put your masonry code AFTER the elements that need it you can fire it off without waiting for `document.ready`
        $(".masonry").masonry();
        // not the most performant solution, but it should work.
        $(".hover").on("mouseover", function(){
            $(".masonry").masonry({
                transitionDuration: 0
            });
        });
    </script>
</body>

Answer 3

The problem arises because it BlocksItdoes not work correctly with the elementinvisible

Try something like this

$(document).ready(function () {
    $(".furniture-menu").mouseenter(function(){
        $(".shuffle-parent-has-display-is-hidden").show();
        $(".shuffle").BlocksIt({
            numOfCol: 4,
            offsetX: 8,
            offsetY: -18,
            blockElement: '.grid'
        });
        $(".menu").off("mouseenter");
    });
})