I have loaded in jQuery transit, and I made sure I did it after loading jQuery, but I still get this error:

I have looked at the resources panel in Chrome, and jQuery transit is being loaded after jQuery. It has also loaded correctly, and shows up with no problems.

I have also tested in the console, testing the examples on the website. They all return this same error.

here is my code:

  $("#current-employers a.industry-company-link").click(function (e)
    {
        e.preventDefault();
        var url = $(this).attr("href");
        var company_container = $("#current-company-profile");
        company_container.load(url);
        company_container.transition({
            y: ($(this).offset().top - company_container.offset().top)
        });
        console.log("container offset: " + company_container.offset().top + "\nURL offset: " + $(this).offset().top);
    });

And the scripts I bring in:

<script src=".8.0/jquery-1.8.0.min.js"></script>

        <script src=".transit/0.1.3/jquery.transit.min.js"></script>

Thanks for any help.

I have loaded in jQuery transit, and I made sure I did it after loading jQuery, but I still get this error:

I have looked at the resources panel in Chrome, and jQuery transit is being loaded after jQuery. It has also loaded correctly, and shows up with no problems.

I have also tested in the console, testing the examples on the website. They all return this same error.

here is my code:

  $("#current-employers a.industry-company-link").click(function (e)
    {
        e.preventDefault();
        var url = $(this).attr("href");
        var company_container = $("#current-company-profile");
        company_container.load(url);
        company_container.transition({
            y: ($(this).offset().top - company_container.offset().top)
        });
        console.log("container offset: " + company_container.offset().top + "\nURL offset: " + $(this).offset().top);
    });

And the scripts I bring in:

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>

        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.1.3/jquery.transit.min.js"></script>

Thanks for any help.

• javascript
• jquery
• css-transitions
• jquery-transit

2 Answers 2

Well, turns out it's jQuery's fault in this case. jQuery 1.8 was the culprit here. Loading in 1.7.2 fixed the problem. I will report this bug to the transit and jQuery team.

UPDATE (April 13, 2013): I was reading through the source code for Transit and it appears that Mr. Cruz has updated the code to work effectively with jQuery 1.8+. If someone has tested it, could they please confirm that it works. Thanks.

This is related to the css hook that jQuery and Transit use. In version 1.7, jQuery didn't have a css hook for transforms. So Transit implemented a hook for us. However, jQuery updated itself and now offers css hooks for transforms. These now conflict with each other. However it is not a bug as jQuery is working fine and as such, it does not need to be reported to jQuery.

Your choices are to use a 1.7 version of jQuery and wait until Transit is updated or edit the Transit code which only takes about a minute.

To edit, get the development version of Transit from the official site. Then go to line 603 where it says $.cssHooks[prop]. Remove the method and place this method there instead:

$.cssHooks[prop] = {
  get: function(elem) {
    var t = $(elem).css('transform');

    if (!t || t === "none") {
      t = new Transform();
    }
    return t.get(prop);
  },

  set: function(elem, value) {
    var t = $(elem).css('transform');

    if (!t || t === "none") {
      t = new Transform();
    }

    t.setFromString(prop, value);

    $(elem).css({ transform: t });
  }
};

You can minify the code at one of the hundreds of compressors available, such as http://jscompress.com/